vue+element-ui 实现提交form表单上传文件_el-form 上传文件

实现提交form表单上传文件，

• 在开发中有时候设计到上传文件，想实现的需求不是上传文件并携带 参数，是想要提交表单的同时，携带上传的文件。那么 我们就需要用这种方法来实现

   <el-form-item label="测试依赖excel文件:"
                          label-width="150px">
              <el-upload class="upload-demo"
                         ref="upload"
                         :action="baseUrl+'/module/v1/manage/'"
                         multiple
                         :data="formInline"
                         :on-preview="handlePreview"
                         :file-list="fileList"
                         :http-request="httpRequest"
                         :limit="1"
                         :auto-upload="false">
                <el-button slot="trigger"
                           size="small"
                           type="">选取文件</el-button>
                <div slot="tip"
                     style="width: 250px;"
                     class="el-upload__tip">只能上传excel格式文件，文件不能超过500kb</div>
              </el-upload>
            </el-form-item>
            <el-button type="primary"
                       icon=" iconfont icon-baocun"
                       @click="submitUpload('formInline')">保存</el-button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

js代码如下，手动创建一个FormData对象，并且运用append的方法把要提交的表单数据逐个追加

 submitUpload (formName) {
 const fd = new FormData()// FormData 对象
      this.fd = fd
      this.$refs.upload.submit();//获取文件的提交动作
      this.fd.append('productid', this.formInline.productid)
   }   
1
2
3
4
5
6

 //新增自定义文件上传事件
    httpRequest (param) {
      console.log(param, '000')
      const fileObj = param.file // 相当于input里取得的files
      this.fd.append('file', fileObj)// 文件对象
      console.log(this.fd.get("file"), '选中文件后')
      axios.post('module/v1/manage/', this.fd).then(res => {
        console.log(res)
        this.moduleidenvieorment = res.data.moduleid
        if (res.data.code == '0000') {
        this.$message({
              type: 'success',
              message: '成功!'
            });
        } else if (res.data.code == '400') {
          this.$message.error(res.data.description);
          // this.$refs.upload.clearFiles();
        }
      })

    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21