MissingServletRequestPartException:Required request part ‘file‘ is not present上传文件报错

前端使用的upload:

<el-upload
        action=""
        :http-request="uploadPost"
        :show-file-list="false"
        :on-change="onChange"
        list-type="picture">
    <img :src="dialogImageUrl" >
</el-upload>
onChange(file,fileList){
                this.dialogImageUrl = file.url;
                this.file = file;
                console.log(file);
            },
            uploadPost(){
                let formData = new FormData();
                formData.append('file',this.file.raw);
                // 文件上传必须设置http请求头信息
                request.post("/api/main/uploadPicture",formData,{
                    headers:{'Content-Type':'multipart/form-data;charset=utf-8'}
                }).then(res => {
                    if(res.code == '0'){
                        this.$message.success("上传成功!");
                    }else{
                        this.$message.error(res.code+' 上传失败!'+res.msg);
                    }
                },error => {
                    console.log('253: 错误! '+error);
                })
            },

这里最重要的是formData.append('file',this.file.raw);取得是this.file.raw

然后记得设置http请求头{
                    headers:{'Content-Type':'multipart/form-data;charset=utf-8'}
                }

后端:

@PostMapping("/uploadPicture")
    public Result<?> uploadPicture(@RequestBody MultipartFile file){
       try{
           if(!file.isEmpty()){
               System.out.println("上传头像");
               String imgPath = "C:/Users/Administrator/Desktop/img";
               File f = new File(imgPath+new Date().getTime()+file.getOriginalFilename());
               byte[] arr = file.getBytes();
               file.transferTo(f);
               return Result.success();
           }else{
               return Result.error("139","图片为空");
           }
       }catch (Exception e){
           e.printStackTrace();
           return Result.error("139",e.getMessage());
       }
    }

这里使用@RequestBody MultipartFile file,也可以使用@RequestParam("file") MultipartFile file,只要对应前端的参数名就行,formData.append('file',this.file.raw)

MissingServletRequestPartException: Required request part 'file' is not present是一个错误,它表示在请求中缺少了名为'file'的必需的参数。 这个错误通常在后端使用@RequestParam或@RequestBody注解来接收文件参数时出现。在前端的请求中必须确保文件上传的参数名与后端接收参数的注解中的参数名保持一致。例如,在前端使用formData.append('file',this.file.raw)来上传文件,则后端的@RequestParam或@RequestBody注解中的参数名应为'file'。 如果错误依然存在,可能是因为在前端的文件input标签中的name字段与后端注解中的参数名不一致导致的。请确保它们的命名一致。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [MissingServletRequestPartException: Required request part ‘file‘ is not present问题](https://blog.csdn.net/weixin_43862596/article/details/118926572)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [MissingServletRequestPartExceptionRequired request part ‘file‘ is not present上传文件报错](https://blog.csdn.net/HQXQ2874760112/article/details/124676049)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值