vue中input框的fileREader技术上传图片

Posted 2020-12-13 xiaoyiyiaixuexi

1.在前端中使用input框，type=”file“来实现选择文件夹的功能

在表单中的input框中的添加按钮

<el-form-item label="产品图片" prop="picture" style="position:relative">
<el-input v-model="form1.picture" placeholder="图片大小为200x200" style="width:85%"></el-input>
<div class="replace">上传</div>
<input type="file" class="file" ref="files" @change="getImages" />
</el-form-item>

2.input中type="type"的样式很难调整，可以采用重写样式覆盖，让input的opacity:0

.file {
  position: absolute;
width: 6%;
padding: 4%;
  right: 0;
  top: 0;
  opacity: 0;
}
.replace {
  position: absolute;
    right: 0;
  top: 0;
width: 7.5%;
  padding: 3.7%;
text-align: center;
  font-size: 13px;
line-height: 5px;
  border: 1px solid #ooo;
}

3.在js中写入fileReader

getImages(e) {
      let _this = this;
      _this.form1.picture = e.target.files[0].name;
      console.log(e.target.files);
      if (!e || !window.FileReader) return; // 看支持不支持FileReader
      let reader = new FileReader();
      reader.readAsDataURL(e.target.files[0]);
      reader.onloadend = function(){
        _this.src1 = this.result;
      };
    },