多图上传问题

<div class="upload_files">
  <div class="upload_file_box">
    <div v-for="(item,index) in imgList" class="add">
      <img :src="item.file.src" alt="">
      <div class="delimg">
        <img class="del" src="../../assets/imgs/delete.png" @click.stop="delImg(index)"/>
      </div>
    </div>
  </div>
  <div class="upload_file_box upload_file_box_add">
    <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>
    <div class="add" @click="chooseType">
      <div class="add-image" align="center">
        <div><img src="../../assets/imgs/upload.png" alt=""></div>
        <!--<p class="font13">添加图片</p>-->
      </div>
    </div>
  </div>
</div>



fileChange(el) {
        if (!el.target.files[0].size) return;
        this.fileList(el.target);
        el.target.value = ''
      },
      fileList(fileList) {
        let files = fileList.files;
        for (let i = 0; i < files.length; i++) {
          //判断是否为文件夹
          if (files[i].type != '') {
            this.fileAdd(files[i]);
          } else {
            //文件夹处理
            this.folders(fileList.items[i]);
          }
        }
      },
      //文件夹处理
      folders(files) {
        let _this = this;
        //判断是否为原生file
        if (files.kind) {
          files = files.webkitGetAsEntry();
        }
        files.createReader().readEntries(function (file) {
          for (let i = 0; i < file.length; i++) {
            if (file[i].isFile) {
              _this.foldersAdd(file[i]);
            } else {
              _this.folders(file[i]);
            }
          }
        });

      },
      foldersAdd(entry) {
        let _this = this;
        entry.file(function (file) {
          _this.fileAdd(file)
        })
      },
      fileAdd(file) {
        if (this.limit !== undefined) this.limit--;
        if (this.limit !== undefined && this.limit < 0) return;
        //总大小
        this.size = this.size + file.size;
        //判断是否为图片文件
        if (file.type.indexOf('image') == -1) {
          this.$dialog.toast({mes: '请选择图片文件'});
        } else {
          let reader = new FileReader();
          let image = new Image();
          let _this = this;
          reader.readAsDataURL(file);
          reader.onload = function () {
            file.src = this.result;
            image.onload = function () {
              let width = image.width;
              let height = image.height;
              file.width = width;
              file.height = height;
              _this.imgList.push({
                file
              });
              if(_this.imgList.length>=3){
                $(".upload_file_box_add").css({display:'none'})
              }
            };
            image.src = file.src;
          }
        }
      },
      delImg(index) {
        this.size = this.size - this.imgList[index].file.size;//总大小
        this.imgList.splice(index, 1);
        if (this.limit !== undefined) this.limit = 3 - this.imgList.length;
        if(this.imgList.length<3){
          $(".upload_file_box").css({display:'block'})
        }
      },

css

 input {
        padding: 10px 5px;
        text-align: right;
        float: right;
        width: auto;
      }
      span {
        float: left;
        .pd2rem(padding,20,0)
      }
      .upload_file_box {
        float: left;
        .add {
          .px2rem(height, 160);
          .px2rem(width, 160);
          .px2rem(margin-right, 20);
          .px2rem(margin-bottom, 20);
          position: relative;
          float: left;
          img {
            width: 100%;
            height: 100%;
          }
          .delimg {
            position: absolute;
            .px2rem(right, -21);
            .px2rem(top, -21);
            .px2rem(width,42);
            .px2rem(height, 42);
            img {
              .px2rem(right, 42);
              .px2rem(top, 42);
            }
          }
        }
      }
      .upload_files{
        overflow: hidden;
        .px2rem(padding, 20);
      }
    }

upload接口调用

accounts.upload(form).then((result) => {
          if(result.data.code=='200'){
            _self.licenseImg=result.data.data;
            // this.MintUI.Indicator.close();
            _self.MintUI.Toast({
              message: '图片上传成功',
              position: 'center',
              duration: 1500
            });
            _self.sendimgFlg=true
          }else {
            _self.MintUI.Toast({
              message: '图片上传失败,请稍后再试',
              position: 'center',
              duration: 1500
            });
            _self.sendimgFlg=false
            _self.delImg(0)

          }
        }).catch(()=>{
          _self.MintUI.Toast({
            message: '图片上传失败,请稍后再试',
            position: 'center',
            duration: 1500
          });

猜你喜欢

转载自www.cnblogs.com/shuihanxiao/p/11283235.html
今日推荐