elementUI实现自定义上传文件并携带参数

vue代码

<el-upload
    ref="upload"
    action="/api/iot/deviceInfo/uploadFiles"
    :before-upload="beforeUploadHandle"
    :on-success="handleSuccess"
    :auto-upload="false"
    multiple
    :limit="2"
    :on-exceed="handleExceed"
    :file-list="fileList">
     <el-link :disabled="disabled" icon="el-icon-paperclip" type="primary">添加文档或视频</el-link>
 </el-upload>

js代码

 // 上传之前
    beforeUploadHandle(file) {
      // 校验格式
      if (
        file.type !== "video/mp4" &&
        file.type !== "application/msword" &&
        file.type !==
          "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
      ) {
        this.$message.error("只支持.mp4、.doc、.docx文件！");
        return false;
      }
    },
    // 超出上传数量的时候调用
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 2 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    // 手动上传
    submitUpload() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.$refs.upload.uploadFiles.length <= 0) {
            this.$message.warning("请选择上传的文档或视频");
            return;
          }
          this.saveLoading = true;
          // 新建formData对象
          let formData = new FormData();
          // 将上传的文件放进formData对象
          this.$refs.upload.uploadFiles.forEach((file) => {
            formData.append("file", file.raw);
          });
          // 携带其他参数
          formData.append("articleTitle", this.form.articleTitle);
          formData.append("category", this.form.category);
          formData.append("author", this.form.author);
          formData.append("keyword", this.form.keyword);
          formData.append("unit", this.form.unit);
          // 调用上传接口
          uploadFile(formData)
            .then((res) => {
              if (res && res.code === 200) {
                this.$message.success("保存成功");
              } else {
                this.$message.error(res.msg);
              }
              this.saveLoading = false;
              this.queryRule();
            })
            .catch((err) => {
              console.log(err);
            });
          this.dialogFormVisible = false;
          this.isAdd = false;
        }
      });
    },

使用this.$refs.upload.uploadFiles获取文件列表是因为通过绑定file-list经常获取不到对象列表，具体原因还不清楚