element关于form表单其他参数+upload文件 一起提交

运用upload有两种场景:

①上传文件是个单独的接口,action里就放上传文件的接口地址就可以,然后在成功回调里拿到后端返回的内容(可能是url；也可能是个对象，里边有url和name)。

②上传文件没有接口，文件作为某个接口的其中一个参数，和其他参数一起，最后传递给后端，就是今天要说的场景。

先说我的需求:

点击上传的蓝色按钮之后，并没有调接口，而是在所有的（其他的）表单填写完成之后 点击下边的 创建 按钮  把其他输入框的数据以及刚刚上传的文件 一起提交给后端，这个时候才会调接口。

下面这张图就是我的需求图：

 解决:

templete部分：

:headers="{ 'Content-Type': 'multipart/form-data'}" //设置请求头,可以有token什么的
action="none" // action:这个属性是上传文件的地址,当我们指定了 auto-upload 属性， 组件就会自动按 action 的地址提交。不设置这个属性就写  action="none"
:show-file-list="false"
class="file_uploader"
drag  //是否启用拖拽上传
:on-change="handleChange"  //文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用,function(file, fileList)
:auto-upload="false" //是否自动(立即)上传,这行代码很关键

        <el-form-item label="算法文件" :label-width="formLabelWidth">
          <el-input
            v-model="form.modelFileName"
            placeholder="算法文件"
            style="width: 80%"
            disabled
          ></el-input>
 
          <el-upload
            :headers="{ 'Content-Type': 'multipart/form-data'}" 
            action="none" 
            :show-file-list="false" 
            class="file_uploader"
            drag
            :on-change="handleChange" 
            :auto-upload="false" // 重要
            ref="upload"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
 
        </el-form-item>

js 部分代码:

核心代码

this.mutipartFile = new FormData();
this.mutipartFile.append("modelFile", file.raw);

表单里的其他参数,都以这种形式添加进 this.mutipartFile,this.mutipartFile就是个变量,叫什么都可以,看你自己

    // 上传文件-----重要,为了拿到 file.raw
    handleChange(file) {
      this.form.modelFileName = file.name
      // 这两行代码比较重要---核心代码
      this.mutipartFile = new FormData();
      // modelFile 我们后端需要的参数名字,看你们需求
      this.mutipartFile.append("modelFile", file.raw);
    },
 
    // 点击确定(创建)
    submitForm() {
      this._submitForm()
    },
    // 节流函数
    _submitForm: throttle(function () {
      // 表单中其他输入框的值,需要传递的参数,this.mutipartFile.append('参数名', '值')
      this.mutipartFile.set('remarks', this.form.remarks);
      this.mutipartFile.set('name', this.form.name);
      this.mutipartFile.set('vars', JSON.stringify(this.form.vars)); //这个参数是因为我们后端规定数组要json形式
      // 调接口,发网络请求,传递参数
      this.model_add(this.mutipartFile)
    }, 600),
     // 添加模型
    model_add(params) {
      // 调接口,传递是否启用的布尔
      model_model_add(params).then((res) => {
        console.log(res, '创建')
      })
    },

 网络请求那一块也可以直接这样写

axios({
      method:'POST',
      headers:'{
          'authorization': token,
          'Content-Type': 'multipart/form-data'
        }', //放你们需要加的请求头
      url:请求接口,
      data:this.mutipartFile 
      }).then(res=>{
     console.log('提交成功')
    }),