vue 向Spring Cloud 同时提交文件和表单内容的实现方式

作者:青山常在人不老   阅读 (87)  |  收藏 (0)  |  点赞 (0)

摘要

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


原文链接:vue 向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);
    }
分类   前端配置
字数   3498

博客标签    vue同时提交文件和表单  

评论