SpringBoot+Vue文件上传报错Current request is not a multipart request

首先说一下，这篇文章主要点在于前端，后端简单讲一下，当出现这个问题时，肯定是上传文件出错，首先要知道，出现这个问题的根本原因为：请求格式错误，注意不是请求方式，是请求头中的Content-Type格式不为：multipart/form-data，当然既然写文档给大家看，那肯定要有头有尾，小编看到很多的文章没头有尾，很是别扭，废话就不多说了，贴后端上传文件核心代码：

目录

给大家附上接口调试图

---

配置文件：

spring:
    servlet:
        multipart:
          enabled: true
          max-file-size: 30MB
          max-request-size: 30MB

核心业务：

public R uploadBinaryFile(MultipartFile file,String fileType, HttpServletRequest request) {
        String size = String.valueOf(file.getSize());

        String path = "";

        //设置文件路径D:\\file\menuDetail
        if(fileType.equals("0")){
            path = "D:" + File.separator + "INTERGATED_PROJECT" + File.separator + "file" + File.separator + "menuDetail";
        }
        File file1 = new File(path);

        //如果路径不存在
        if(!file1.exists()){
            logger.info("该 " + path + " 路径不存在，创建该路径中");
            file1.mkdirs();
        }

        //文件名称赋值
        String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."), file.getOriginalFilename().length());
        String prefix = file.getOriginalFilename().substring(0, file.getOriginalFilename().lastIndexOf("."));
        String newFIleName = "MENU_Detail_" + prefix + "_" + DateFormat.dateToStrDetailTrim() + suffix;
        String newPath = path + File.separator + newFIleName;
        logger.info("新文件名为：" + newFIleName);
        logger.info("文件新路径：" + newPath);


        BufferedInputStream bufferedInputStream = null;
        BufferedOutputStream bufferedOutputStream = null;

        boolean flag = true;

        try {
            bufferedInputStream = new BufferedInputStream(file.getInputStream());
            bufferedOutputStream = new BufferedOutputStream(new FileOutputStream(newPath));

            byte[] bytes = new byte[1024];
            int len = 0;
            while((len = bufferedInputStream.read(bytes)) != -1){
                bufferedOutputStream.write(bytes,0,len);
            }
        } catch (IOException e) {
            logger.error("文件上传失败！");
            e.printStackTrace();
            flag = false;
        }finally {
            try {
                if(bufferedOutputStream != null){
                    bufferedOutputStream.close();
                }
                if(bufferedInputStream != null){
                    bufferedInputStream.close();
                }
            } catch (IOException ioException) {
                ioException.printStackTrace();
            }
        }

        if(!flag){
            logger.error("文件上传失败..");
            return R.error("文件上传失败");
        }

        Map<String, Object> stringObjectMap = JwtTokenUtils.tokenHandlerParse(request);
        long id = ((Integer) stringObjectMap.get("id")).longValue();
        String account = (String) stringObjectMap.get("account");
        AdminTo admin = baseMapper.getInfoByIdAndAccount(id,account);

        logger.info("文件上传成功，开始入库...");
        IntegratedFile integratedFile = new IntegratedFile();
        integratedFile.setFileName(newFIleName);
        integratedFile.setFileOldName(file.getOriginalFilename());
        integratedFile.setFilePath(newPath);
        integratedFile.setFileLogo("0");
        integratedFile.setFileType(fileType);
        integratedFile.setFileSize(size);
        integratedFile.setUserId(admin.getId());
        integratedFile.setUserNumber(admin.getNumber());
        integratedFile.setUserName(admin.getUsername());
        integratedFile.setFileIsDeleted("0");
        int insert = baseMapper.insert(integratedFile);
        if(insert > 0){
            logger.info("文件上传成功且入库成功..");

            logger.info("开始登记远程操作日志信息...");
            OperateTO operateTO = new OperateTO();
            operateTO.setDetail("用户:" + admin.getUsername() + " 于-" + DateFormat.dateToStrDetail() + " 进行上传添加权限菜单手册，处理后文件名：" + newFIleName + ",上传成功");

            //远程操作日志信息登记模块
            boolean operateFlag = feignClientServerOperate(operateTO, admin, "intergate-file", "function-uploadFileReader", "true");

            if (!operateFlag) {
                logger.error("远程操作日志信息登记失败...");
            }

            return R.success("文件上传成功").data("fileId",integratedFile.getFileId());
        }

        //文件入库失败处理
        logger.error("文件入库失败删除文件中...");
        File file2 = new File(newPath);
        if(file2.exists()){
            file2.delete();
            logger.info("删除文件成功");
        }

        return R.error("文件上传失败！");
    }

前端实现，这里要说一下，我在前端上传文件时使用的自定义请求，没有使用upload默认方式进行请求，因为后端的接口是多个参数。

前端请求封装：

import request from '@/utils/request'

const api_url = '/api/file'

export default {

    //文件上传  
    uploadBinaryFile(data){
        return request({
            url:`${api_url}/uploadBinary`,
            method:'post',
            data:data
        })
    }
}

前端代码我这里只贴核心 upload：

<el-upload
              class="upload-demo"
              :on-preview="handlePreview"
              ref="upload"
              name="file"
              :before-upload="beforeUpload"
              :auto-upload="autoUpload"
              :limit="1"
              :on-exceed="handleExceed"
              :http-request="uploadFile"
              :on-change="uploadChange"

            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                文件大小不得超越30MB，一次只能上传一次文件
              </div>
</el-upload>

js交互，这里只贴：自定义请求事件uploadFile、提交文件至服务器事件onSubmit，自定义请求中我使用了 new FormData() 创建了一个Content-Type为：multipart/form-data 表单容器对象，将后端所需要的数据添加至这个表单容器，进行与后台交互，这样就避免了Current request is not a multipart request问题出现。注意，你也可以不创建这个对象，可以直接写一个post、Content-Type为：multipart/form-data的表单，即：enctype ="multipart/form-data" 然后根据这个表单id，获取到这个表单并提交到后端即可。

//自定义请求
    uploadFile(params){
        let fd = new FormData();
        fd.append('file', params.file);
        fd.append('fileType', this.filesModel.fileType);
        console.log(fd)
       files.uploadBinaryFile(fd).then(response => {
            this.$message({
                    message: '文件上传成功',
                    type: 'success',
            });
            this.filesModel.filesId = response.data.fileId

       })
    },

//提交
onSubmit(){
        this.$refs.upload.submit();
    }

给大家附上接口调试图

问题得到解决，怎么说呢，感觉很简单，但是想了想还是发出来吧，没啥说的~~~，

有问题及时评论，看到就回