element-ui 文件上传

<el-upload
      ref="upload"
      class="upload-demo"
      action="#"
      :auto-upload="false"
      :on-change="handleUpchange"
      :on-preview="handlePreview"
      :before-remove="beforeRemove"
      multiple
      :file-list="fileList"
      name="dataFile"
      :limit="10"
      :on-exceed="handleExceed"
      accept=".png,.jpg,.jpeg,.bmp,.txt,.zip,.rar,.pdf,.xls,.xlsx,.docx,.doc,.ppt,.pptx"
    >
      <div class="choose common-box change-file" style="margin-right: 1.5625vw" >
        <el-image style="width: 0.7vw; height: 0.7vw" :src="require('@/assets/images/flow/icon1.png')"> </el-image>
        <div style="margin-left: 5px">选择附件</div>
      </div>
    </el-upload>

//上传校验文件    
handleUpchange(file, fileList) {
      var regex = new RegExp("[`~!@#$^&*=|{}':;',\\[\\]<>/?~！@#￥……&*——|{}‘；：”“'。，、？]")
      if (regex.test(file.name)) {
        this.$message.warning(`文件名中不包含特殊字符！`)
        fileList.splice(-1, 1) //移除当前重复的文件即末尾对象
      }
      if (file.name.length > 60) {
        this.$message.warning(`文件名超长不可上传！`)
        fileList.splice(-1, 1) //移除当前重复的文件即末尾对象
      }
      if (file.size == 0 || file.size > 20 * 1024 * 1024) {
        this.$message.closeAll()
        this.$message.warning(`${file.name}文件大小异常，请上传大于0KB小于20MB的文件`)
        fileList.splice(-1, 1) //移除当前重复的文件即末尾对象
        return false
      }

      this.fileList = fileList
      for (let i = 0; i < this.fileList.length; i++) {
        for (let j = i + 1; j < this.fileList.length; j++) {
          if (this.fileList[i].name == this.fileList[j].name) {
            this.$message.closeAll()
            this.$message.warning('不能上传重复文件！')
            this.fileList.splice(j, 1)
            return false
          }
        }
      }
      this.$emit('event', this.fileList)
    },

    // 文件个数超出
    handleExceed(files, fileList) {
      this.$message.closeAll()
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },

//文件代码预览
window.open('http://' + url)

//文件下载
let url =“xxxx”
      // html a标签下载
      const link = document.createElement('a')
      link.href = url // 后端返回的文件下载链接
      link.click()
      window.location.href = url //后端返回的下载链接

    /**
     * @description: 附件上传
     * @param {*} processInstId
     * @return {*}
     */
    uploadFileList(processInstId, buttonFlag) {
      console.log("=====文件上传==========");
      const formData = new FormData();
      formData.append("upuser", this.loginerId);
      formData.append("filetype", "LCFJ");
      formData.append("processInstId", processInstId);
      formData.append("buttonFlag", buttonFlag);
      for (let i = 0; i < this.fileList.length; i++) {
        formData.append("uploadFile", this.fileList[i].raw);
        formData.append("filename", this.fileList[i].raw.name);
      }
      return new Promise((resolve, reject) => {
        toUploadFile(formData)
          .then((res) => {
            resolve(res);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },

formData 相关学习文档链接 ：前端 之 FormData对象浅谈-CSDN博客，前端 之 FormData对象进阶_formdate-CSDN博客