摘要

针对vue el-upload 向Spring Cloud/Spring Cloud同时提交文件和表单内容的实现方式以及代码

在element ui官方技术文档中，针对el-upload文件手动上传，他们仅仅给出了一个提交文件的代码实现方式

this.$refs.upload.submit();

但是这种方式只支持向后端传递文件，如果想在传递文件的同时传递form表单数据，还需要去填充el-upload中的:data属性（我试过，但是没有实现成功，后端接收不到数据）
本文将使用另一种方式来同时提交文件和表单内容，那就是formData，该方法实测可以，我将会同时给出前端代码和后端代码实现的逻辑。

需求假设

假设你有一个表单，需要向后端传递一个name属性，同时需要上传一个文件

实现

前端代码：

<el-form :model="addbatchData" label-position="top" label-width="80px" >
        <el-form-item label="批次名称" prop="name" style="width:600px;">
          <el-input v-model="addbatchData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据文件" prop="document">
            <el-upload
                    class="upload-demo"
                    :limit="1"
                    :auto-upload="false"
                    :on-change="fileChange"
                    :file-list="fileList"
                    accept=".xls,.xlsx"
                  >
                    <!--:on-progress="uploadProcess"-->
                    <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
                  </el-upload>
        </el-form-item>
         <el-form-item>
              <el-button type="primary" @click="saveBatch">提交表单</el-button>
         </el-form-item>

在上面的页面代码中，我们重点需要注意以下几个方法（参数）
1、fileChange（当选中文件时触发的函数，该函数包含两个入参file,fileList）
2、fileList（这个参数是为了实时缓存选中的file列表）
3、saveBatch（点击保存时封装表单数据和文件，上传到后端）
下面为对应的方法：

export default {
  data() {
    return {
        fileList: []
            }
      },
  methods: {
     fileChange(file, fileList) {
        this.fileList = [...fileList]
    },
    saveBatch() {
        var formData = new FormData();
        //注意：raw这个必须带着的啊，而不是像网上那些垃圾抄袭文章，不带这个（raw真正的指向你要上传的这个文件）
        formData.append('file', this.fileList[0].raw)
        var data = {}
        //将name封装成json
        data.name = this.addbatchData.name
        //注意，将data放到formData中时，必须转为字符串，否则后端接收是出问题
        formData.append('batchAddParams', JSON.stringify(data));
        //ajax提交formData，本文使用的request.js
              addBatch(formData).then(res => {
                    if (res.code === '00000') {
                      this.$message.info("增加批次成功!")
                    } else {
                      this.$message.error('数据加载错误，请检查后台服务！')
                    }
                  }).catch(function(error) {
                    console.log(error);
                  })
    }
  }
}

本文使用的request.js
对应的js：

/***
 * 新增外呼批次接口
 */
export function addBatch(data) {
  return request({
    url: '/outCall/batch/add',
    method: 'post',
    contentType: false,
    data
    // ContentType: 'multipart/form-data'
    // contentType: false
  })
}

至此前端代码就写完了

后端代码接收逻辑

    @ApiOperation("新增外呼批次接口")
    @PostMapping(value = "/add")
    @ResponseBody
    public BaseResponse addBatch(HttpServletRequest request) {
        MultipartHttpServletRequest multipartRequest = WebUtils.getNativeRequest(request,
            MultipartHttpServletRequest.class);
        MultipartFile file = multipartRequest.getFile("file");
        String paramStr = multipartRequest.getParameter("batchAddParams");
         OcBatchAddParamsVo batchAddParams = null;
        try {
            //ali fastjson
            batchAddParams = JSON.parseObject(paramStr, OcBatchAddParamsVo.class);
        }
        catch (Exception e) {
            throw new BusinessException(
                BobfintechErrorNoEnum.COM_BOBFINTECH_OC_BATCH_IMPORT_DATA_PARSE_ERROR.getErrorNo(),
                BobfintechErrorNoEnum.COM_BOBFINTECH_OC_BATCH_IMPORT_DATA_PARSE_ERROR.getErrorConsonleInfo());
        }

    //此时，我们就能拿到前端的对象了
        return ResponseData.out(BobfintechErrorNoEnum.COM_BOBFINTECH_SUCCESS);
    }

 收藏 ( 0 )  赞 ( 0 )