0
点赞
收藏
分享

微信扫一扫

element-plus的el-upload组件自动上传,SpringBoot接收报错org.springframework.web.multipart.MultipartException Crea

云卷云舒xj 2022-03-15 阅读 34

报错信息

在这里插入图片描述
在这里插入图片描述

报错原因

代码

后端代码

接收的接口:

    @PostMapping("/change/picUrl")
    @ApiOperation("修改用户头像")
    public ResponseResult changeUrl(@RequestParam("file") MultipartFile file) {
        return mkUserService.changeUrl(file);
    }

前端代码

<el-upload
              :action="headerPicUploadApi"
              :show-file-list="false"
              :auto-upload="true"
              :on-success="uploadPicSuccess"
              :on-error="uploadPicError"
              :headers="headerPic"
              :before-upload="beforeUpload"
              :name="'file'"
          >

方法啥的见官网文档

解决方法(有点妥协):

打开el-upload 的自动上传开关 :auto-upload=“true” 然后 :before-upload=“beforeUpload” (这个方法是会在自动上传前触发),我们就在beforeUpload这个方法里完成我们图片上传,然后返回false就会终止自带的图片上传

    const beforeUpload = (file: any) => {
      console.log(file);
      let formData = new FormData();
      formData.append('file', file);
      let config = {
        headers: {'Content-Type': 'multipart/form-data'}
      };
      proxy.$axios.post(headerPicUploadApi, formData, config)
          .then((res: any) => {
            console.log(res.data);
            // 此处只做示例
          })
      return false;
    }

Tips:这是我的解决方法,因为我不太懂前端,希望各位大佬能纠正~

举报

相关推荐

0 条评论