Vue + axios 结合 Spring Boot 上传文件

最近做一个项目，遇到了一个问题，就是用Vue 上传文件，其实这个很简单，但在实际操作过程中却遇到了问题，后台Controller接收到的文件参数始终为null。如果直接用 Vue的Form 提交，这个问题是很容易就能解决的。但是我要的效果是异步的提交，因此这就需要从根本上解决它。

从网上各种搜，看了N个帖子，也做了各种尝试，都没有成功。

中间过程就不做过多赘述了，直接参考相关的代码吧。

使用 el-upload 来操作选择文件，关于这个组件的使用请查找相关资源。

前端代码：

 <el-upload
          class="upload-demo"
          ref="upload"
          :action="importAction"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList "
          :on-exceed="handleExceed"
          :on-change="handleFileChange"
          multiple
          :limit="1"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">确认导入</el-button>
          <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过20M</div>
        </el-upload>

submitUpload() {
              console.info("提交Form表单..." + this.fileList )
              this.upload.fileList = this.fileList;

             

              // this.$refs.upload.submit();


              this.upload.file = this.file;
              // let params = Object.assign({}, this.upload)


              let params = new FormData();
              params.append("file",this.file.raw)
              params.append("operation","upload_file")

              // params.file = this.file

              // let instance = axios.create({
              //   baseURL:'http://localhost:10000/api',
              //   headers: {'Content-Type':'multipart/form-data'}
              // });
              //
              // instance.post('/hr/salaryImport/doImport',params).then((res) => {
              //   console.info("Play it ..." + res)
              // })




              this.fileList = []



            },

划重点:

1.可以直接使用submit提交直接使用：

this.$refs.upload.submit(); 就可以了。
2. 使用 axios 异步提交

创建一个Form对象，这里要特别注意，添加file 参数时，一定要用 file.raw ，而不是 file ,我就是在这个小细节上浪费了很长的时间。

特别注意，一定要设置 header 的 content-type = 'multipart/form-data

后台代码:

@PostMapping(value="/doImport" , consumes = { "multipart/mixed", "multipart/form-data" } )
    public HttpResult doImportSalary(  @RequestParam(value = "file", required = false ) MultipartFile ufile ,  HttpServletRequest request) {

		System.out.println("上传的文件是:" + ufile );
}

这样就可以搞定了！

希望对大家有所帮助！

Vue + axios 结合 Spring Boot 上传文件

猜你喜欢