vue中input框的fileREader技術上傳圖片

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;
      };
    },