elment-ui文件上传详解

文件上传总有各种问题，算是给自己一个总结吧
HTML

 <el-form-item prop="" class="form-item">
  <template slot="label">上传文件:</template>
   <div class="form-info">
     <el-popover              ----弹出框设置
      placement="top"
      width="400"
      trigger="click">
      <el-upload
       style="background-color: #E8F8F6"
       accept=".pdf, .doc, .docx, .xls, .xlsx, .jpg, .png"    ---限制的文件类型
       :action="uploadUrl"       ---动态地址
       multiple                 ---可同时选择多个
       :limit="5"               ---最多上传5个文件
       ref="uplode"
       :on-preview="handlePreview"    ---点击上传文件
       :on-remove="handleRemove"      ---删除已上传文件
       :file-list="form.fileList"     ---本地列表
       :before-upload="beforeUpload"   ---文件上传前校验
       :on-change="fileChange"        ---文件状态改变
       :on-success="upSuccess"         ---上传成功后
       :on-exceed="handleExceed"        ---多选文件提示
       :on-error="upError"             ---上传失败
       :before-remove="beforeRemove"   ---删除文件前
       >
       <el-button size="small" style="color:black;margin: 10px 0 0 10px;"  class="actBtn actBtn-0">
         上传文件
       </el-button>
       <div slot="tip" class="el-upload__tip">只能上传pdf/doc/docx/xls/xlsx/jpg/png文件，且不超过2M</div>
       </el-upload>
    <div slot="reference">
     <svg-icon icon-class="up"  className="up" sgv_width="20px" sgv_height="20px" />
      <span style="font-size: 14px;">上传附件</span>
    </div>
      </el-popover>
   </div>
</el-form-item>

个人理解，可能有些错误和不足，参考一下就行了
这个我是用了弹出框嵌套的文件上传

这是效果


js代码

  getfile(file) {      //调用的插件写的方法，预览用的
            console.log(file);
            FileSaver.saveAs(file.url,file.name);
        },
         // 删除已上传文件
      handleRemove(file, fileList) {
        console.log(file, fileList);
        this.form.fileList = fileList
        console.log(this.form.fileList)

      },
       // 点击上传的文件
        handlePreview(file) {
            console.log(file);
            // this.dialogImageUrl = file.url;
            // this.dialogVisible = true;
            this.getfile(file)
        },
        // this.$message(); 为自定义全局提示
        // 上传文件之前
        beforeUpload(file) {
            const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
           
            const whiteList = ["pdf", "doc", "docx", "xls", "xlsx",'jpg','png'];
           
            if (whiteList.indexOf(fileSuffix) === -1) {
              this.$message("上传文件只能是 pdf、doc、docx、xls、xlsx、jpg、png格式", "error");
              return false;
            }
           
              const isLt2M = file.size / 1024 / 1024 < 2;
             
              if (!isLt2M) {
                this.$message("上传文件大小不能超过 2MB", "error");
                return false;
              }
            },
            
            fileChange(file){
                console.log(file);
            },
            //多选文件提示
            handleExceed(files, fileList){
                this.$message(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            // 上传成功
            upSuccess(response, file, fileList) {
                console.log('成功');
                  console.log(response, file, fileList);
                 if(response.success){
                   this.form.fileList.push({name: file.name, url: this.utils.getPicUrl()+response.items[0].filename, uid: file.uid})
                 }else{
                   this.form.fileList=this.form.fileList.splice(this.form.fileList.length-1,1)
                   this.$message.error(response.message);
                 }
                console.log(this.form.fileList);
            //   this.$message("上传成功");
            //   this.showTaxt = false
            },
            // 上传失败
            upError(e) {
              this.$message.error("上传失败", "error");
            },
        // //移除提示
        //  beforeRemove(file, fileList) {
        // return this.$confirm(`确定移除 ${ file.name }？`);
        //  },

本文地址：https://blog.csdn.net/weixin_49050598/article/details/112538074