使用element-ui的upload上传文件后台MultipartFile为null解决方案

问题描述

在使用element-ui的upload上传文件时，后台接收的MultipartFile为null
相关html代码

<el-dialog title="导入" :visible.sync="dialogImportVisible" width="480px">
<el-form label-position="right" label-width="170px">
<el-form-item label="文件">
<el-upload
:multiple="false"
:on-success="onUploadSuccess"
action="http://localhost:8202/admin/cmn/dict/importData"
class="upload-demo">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传xls文件，且不超过500kb</div>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogImportVisible = false">
    取消
</el-button>
</div>
</el-dialog>

相关js代码

<script>
import dict from '@/api/cmn/dict'
export default {
    data() {
        return {
            dialogImportVisible: false
        }
    },
    created() {
    },
    methods: {
        onUploadSuccess(){
            //提示
              this.$message({
                type: 'success',
                message: '上传成功!'
              })
            this.dialogImportVisible = false
            this.getDictList(1)
        },
        importData(){
            this.dialogImportVisible=true
        }
    }
}
</script>

相关后端代码

@RestController
@RequestMapping("/admin/cmn/dict")
@CrossOrigin
public class DictController {

    @Autowired
    private DictService dictService;

    @ApiOperation(value="导入数据")
    @PostMapping(value = "importData")
    public Result importData(MultipartFile multipartFile) {
        if(multipartFile==null) return Result.fail();
        dictService.importData(multipartFile);
        return Result.ok();
    }
}

原因分析

1、验证前台是否发送了文件

修改html代码如下
添加了 :before-upload=“onBeforeUpload”

<el-dialog title="导入" :visible.sync="dialogImportVisible" width="480px">
<el-form label-position="right" label-width="170px">
<el-form-item label="文件">
<el-upload
:multiple="false"
:on-success="onUploadSuccess"
:before-upload="onBeforeUpload"
action="http://localhost:8202/admin/cmn/dict/importData"
class="upload-demo">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传xls文件，且不超过500kb</div>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogImportVisible = false">
    取消
</el-button>
</div>
</el-dialog>

修改js代码如下
添加onBeforeUpload方法，参数是上传的文件,在文件上传前执行

<script>
import dict from '@/api/cmn/dict'
export default {
    data() {
        return {
            dialogImportVisible: false
        }
    },
    created() {
    },
    methods: {
    	onBeforeUpload(file){
		 	console.log(file)
		},
        onUploadSuccess(){
            //提示
              this.$message({
                type: 'success',
                message: '上传成功!'
              })
            this.dialogImportVisible = false
            this.getDictList(1)
        },
        importData(){
            this.dialogImportVisible=true
        }
    }
}
</script>

运行结果如下

结论：前端上传了文件但是后台没有接收到

2、验证是否是后端参数原因

修改参数为 @RequestParam Map<String,MultipartFile> map

@RestController
@RequestMapping("/admin/cmn/dict")
@CrossOrigin
public class DictController {

    @Autowired
    private DictService dictService;

    @ApiOperation(value="导入数据")
    @PostMapping(value = "importData")
    public Result importData(@RequestParam Map<String,MultipartFile> map) {
        if(multipartFile==null) return Result.fail();
        dictService.importData(multipartFile);
        return Result.ok();
    }
}

调试发现，map是有值的，但是它的key却是file

再次修改参数为 @RequestParam(“file”) MultipartFile multipartFile
果然还是接收到了

查阅官网

发现,在文件上传当中，是默认参数名是file的

解决方案

后台接收文件的参数名与前端文件上传参数名保持一致
前端文件上传参数名可以通过name来指定,例如 a

public Result importData( @RequestParam("a") MultipartFile file) {
   System.out.println(file);
    return Result.ok();
}

参考

https://blog.csdn.net/weixin_53285159/article/details/121030773