• 多图上传问题


    <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
              });
  • 相关阅读:
    数据结构 链表笔记
    C语言 字符串操作 笔记
    数据结构 排序算法 笔记
    链表详解
    mysql常用命令
    图片压缩工具之grunt-contrib-imagemin
    正则表达式
    阿里云部署nodejs服务器(windows)
    canvas简介
    js面向对象
  • 原文地址:https://www.cnblogs.com/shuihanxiao/p/11283235.html
Copyright © 2020-2023  润新知