Vue前端使用el-upload标签实现文件自定义随表单上传和Java后端接收以及踩坑详解

Vue前端使用el-upload标签实现文件自定义随表单上传和后端接收以及踩坑详解

---

---

前端Vue

<el-dialog
      id="dialogFormVisible"
      width="550px"
      title="添加文件测试"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        ref="dataForm"
        :model="addAutoScript"
        label-position="left"
        label-width="150px"
        style="width: 450px; margin-left: 20px"
        :rules="rules"
      >
        <el-form-item label="scriptName:" prop="scriptName">
          <el-input
            v-model="addAutoScript.scriptName"
            placeholder="请输入脚本名称"
          />
        </el-form-item>
        <el-form-item label="description:" prop="description">
          <el-input
            v-model="addAutoScript.description"
            placeholder="请输入描述信息"
          />
        </el-form-item>
        <el-form-item lable="上传脚本" prop="autoScriptFile">
          <el-upload
            :multiple="false"
            action=""
            :auto-upload="false"
            :file-list="autoScriptFile"
            :on-change="handleUploadChange"
          >
            <el-button slot="trigger" size="small" type="primary"
              >点击上传脚本</el-button
            >
            <div slot="tip" class="el-upload__tip">
              只允许上传xxx文件,且不超过xxx
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addData()"> 提交 </el-button>
      </div>
    </el-dialog>
    
------------------------------------------------------------------------------------------------------------------

 return {
      autoScriptFile: [],
      addAutoScript: {},
      dialogFormVisible: false,
    };

------------------------------------------------------------------------------------------------------------------

methods: {
    //上传文件改动方法
    handleUploadChange(file, fileList) {
      this.autoScriptFile = fileList;
    },

    //添加请求提交
    addData() {
      this.$refs["dataForm"].validate((valid) => {
        let formData = new FormData();
        formData.append("scriptName", this.addAutoScript.scriptName);
        formData.append("description", this.addAutoScript.description);
        this.autoScriptFile.forEach((val, index) => {formData.append("autoScriptFile", val.raw)});
        if (valid) {
          addAutoScriptApi(formData).then((response) => {
            if (response.code == "200") {
              this.$message.success("成功");
            } else {
              this.$message.error("失败");
            }
            this.dialogFormVisible = false;
            this.getList();
          });
        } else {
          this.$message.error("表单验证失败! ");
        }
      });
    },
  }

------------------------------------------------------------------------------------------------------------------

export function addAutoScriptApi(data) {
  return request({
    url: '',
    method: 'post',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    data: data
  })
}

后端Java

    @RequestMapping(value = "/", method = RequestMethod.POST, produces = MediaType.MULTIPART_FORM_DATA_VALUE)
    @ResponseBody
    public void addAutoScript(AutoScriptRecord scriptRecord) {
        List<MultipartFile> autoScriptFile = scriptRecord.getAutoScriptFile();
        System.out.println("multipartFile = " + autoScriptFile.size());
    }

踩坑

1. FormData ：添加数组属性时用forEach一直append就可以了，先push进数组再append到FormData会有报错；
2. Content-Type ：前后端保持一致都为multipart/form-data即可；
3. action ：el-upload标签使用的必选项，留空就行，是真没用，别试了，浪费时间！！！
4. on-change ：通过这个方法可以把上传文件赋给上传数组参数；