vue實現多張圖片上傳與預覽

 方法1：

html:

<div v-if='imgsback.length>0' class="flex">
    <div class="img-box" v-for="(item, i) in imgsback" :key='i' >
          <img class="img" :src="item" alt=""> <span @click="delimgback(i)"><i class="el-icon-delete"></i></span>
    </div>
</div>
<div class="img-file" v-if='imgsback.length < sizeback'>
<input type="file" id='files' @change='fileChangeback($event)'>
        <label for="files"></label>
</div>

數據：

data(){
   return{
　　　imgsback: [],      // 圖片預覽地址
     imgfilesback: [],  // 圖片原文件，上傳到后台的數據
     sizeback: 1 ,      // 限制上傳數量
｝

方法methods:（每上傳一張圖片就調用一次接口將數據傳給后台）

　　　　　　/* 圖片上傳 */
            fileChangeback(e) {  // 加入圖片
                // 圖片預覽部分
                var _this = this
                var event = event || window.event;
                var file = event.target.files
                var leng=file.length;
                for(var i=0;i<leng;i++){
                    var reader = new FileReader();    // 使用 FileReader 來獲取圖片路徑及預覽效果
                    _this.imgfilesback.push(file[i])
                    reader.readAsDataURL(file[i]); 
                    reader.onload =function(e){
                    _this.imgsback.push(e.target.result);   // base 64 圖片地址形成預覽                                 
                    };                 
                }
                // 圖片上傳給后台部分
                var file = _this.imgfilesback[0];
                let form = new FormData(); 
                form.append('imgFile',file);
                
                var vm = this;
                _this.$axios({
                    url: '/tryOut/upload',
                    method: 'post',
                    data: form,
                    headers: {'content-Type':'multipart/form-data'}
                }).then((re)=>{
                    console.log('re',re)
                    vm.imgurl = re.data.data.url
                    var imglist = vm.imglist;
                    imglist.push(re.data.data) 
                    vm.imglist = imglist;
                    console.log('vm.imglist',vm.imglist)
                }).catch((err)=>{
                    console.log(err)
                })
            },

//刪除圖片的方法

delimgback(i){

     this.imgfilesback.splice(i, 1)

     this.imgsback.splice(i, 1)

},

 方法2methods(圖片預覽和圖片數據上傳是兩個方法)

 /* 圖片上傳--預覽 */
    fileChangeback(e) {  // 加入圖片
        // 圖片預覽部分
        var vm = this
        var event = event || window.event;
        var file = event.target.files
        var leng=file.length;
        for(var i=0;i<leng;i++){
            var reader = new FileReader();    // 使用 FileReader 來獲取圖片路徑及預覽效果
            vm.imgfilesback.push(file[i])
            reader.readAsDataURL(file[i]); 
            reader.onload =function(e){
              vm.imgsback.push(e.target.result);   // base 64 圖片地址形成預覽                                 
            };                 
        }
    },
    // 上傳圖片給后台
    updateImgToBack(){
          var url = '/zl/upload/' + this.checkedCatagoryId
          let form = new FormData(); 
          this.imgfilesback.forEach((item,index) =>{
            form.append('file',item);
          })
          var vm = this
          this.$axios.post(url,form).then(function(res){
            if(res.data.flag){
              vm.$message({
                  message: res.data.message,
                  type: 'success'
              });
              vm.updataCategoryShow = false
              vm.reload()
            }
          }).catch((err)=>{
              console.log(err)
          })
    },