vue預覽上傳圖片

最近作公司某某活動，裏面有個圖片預覽上傳的功能。爲了KPI分享文章原創的40%，匆忙動手寫下，歡迎各類吐槽。

1.先上圖

2.上代碼

弄個框框預覽圖片，弄個框框添加圖片

<div class="page">
      <div class="upload-img">
        <!-- 上傳圖片 -->
        <div class="upload-img__content">
          <div class="upload-img__item" v-for="(item,index) in imgList" :key="index">
            <img :src="item" alt="用戶上傳的附件"/>
          </div>
          <div class="upload-img__item">
            <div class="upload-img__add"></div>
            <input class="file" type="file" name="file" accept="image/*"  v-on:change="changeImage($event)" ref="fileInput" multiple>
          </div>
        </div>
        <!-- 上傳圖片 -->
      </div>
    </div>
</template>
複製代碼

3.重點來了，預覽圖片

changeImage(e) {
      var vm = this;
      var array = e.target.files;
      if(array.length + vm.imgList.length < 10){ //不超過9張
        for (let index = 0; index < array.length; index++) {
          var file = array[index];
          if (file.size / 1024 / 1024 > 2) {
            this.$Message.info("圖片不能超過2M");
            return;
          }
          var reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function(e) {
            console.log(e)
            //預覽
            vm.imgList.push(this.result);
          };
        }
       }else{
         alert('您還能選X張圖片');
       }
    },
    //下一步
    addInquireNext(){
      //上傳圖片
      let vm = this;
      if (vm.$refs.fileInput.files.length !== 0) {
        var image = new FormData();
        image.append("file", vm.$refs.fileInput.files[0]);//此處待接口傳值
       // inquire.upLoadMoreImg.r(image).then(res => {});
      }
    }
複製代碼

噹噹噹，完成了!!! 請欣賞效果以下圖。