vue实现多张图片上传与预览 - 躺在巨人肩膀上的小那

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