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"  @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)
          })
    },