图片上传报错文件为空可能是因为你的vue用了qs

背景

前端vue使用了qs对传递的参数进行序列化成URL的形式，以&进行拼接，但是我在进行图片功能文件上传时，后台以MultipartFile类型接收，一直提示文件为空，让我很无语。

开窍

于是开始漫长的度娘时光，网上也有很多不同的解释，病急乱投医，也试了很多方法，几经确定我的axios参数传递过程中也没有错误，我甚至开始怀疑是不是后台的问题。然后就看到了一个与众不同的解释：传递的文件流被qs进行了转换

然后，我就加了一个判断，如果是文件流就不进行qs转换，问题遂得以解决

main.js相关代码，改进之前：

// 请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {
  // 为请求头对象，添加token验证字段
  config.headers.token = window.sessionStorage.getItem('token')

  config.data = qs.stringify(config.data)
  
  // 在最后必须 return config
  return config
})

main.js相关代码改进之后：

axios.interceptors.request.use(config => {

  // 为请求头对象，添加token验证字段
  config.headers.token = window.sessionStorage.getItem('token')
  if (Object.getOwnPropertyNames(config.data).length !== 0) {
    config.data = qs.stringify(config.data)
  }
  // 在最后必须 return config
  return config
})

element上传组件引用

        <el-upload action="" :before-upload="beforeAvatarUpload">
            <el-button type="primary">点击上传</el-button>
        </el-upload>

element上传时调用的方法

        async beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg'
            const isLt2M = file.size / 1024 / 1024 < 5

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!')
                return false
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 5MB!')
                return false
            }
            var formData = new FormData()
            formData.append('file', file)
            const { data: res } = await this.$http.post(
                '/goods/upload',
                formData
            )

            if (!res.success) {
                return this.$message.error('图片上传失败！')
            }
            return this.$message.success('图片上传成功！')
        },

后台对应的上传方法

    @ApiOperation("图片上传功能")
	@PostMapping("upload")
	public Result uploadPicture(MultipartFile file) {
		if (ObjectUtils.isEmpty(file) || file.isEmpty()) {
			log.error("文件为空");
            return Results.failure("文件为空");
        }
		// 获取图片原始文件名
		String originalFileName = file.getOriginalFilename();
		log.info("上传的文件名："+originalFileName);
		// 后缀
		String suffix = originalFileName.substring(originalFileName
				.lastIndexOf("."));
		log.info("文件后缀名："+suffix);
		// String name = "" + System.currentTimeMillis();

		SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");
		String fileName = sdf.format(new Date()) + suffix;
		String smallFileName = sdf.format(new Date()) + "small" + suffix;
		/*String path = "D:/upload/img";*/

		String filePathName = path + "/" + fileName;
		String thumbnailFilePathName = path + "/" + smallFileName;
		System.out.println(filePathName);
		File dest = new File(filePathName);

		// 上传图片
		try {
			// 将上传的文件写到服务器上指定的文件。
			file.transferTo(dest);
			double scale = 0.25d;
			Thumbnails
					.of(filePathName)
					.scale(1f)
					.outputQuality(scale)
					.outputFormat(
							originalFileName.substring(originalFileName
									.lastIndexOf(".") + 1))
					.toFile(thumbnailFilePathName);
			dest.delete();			JSONObject obj = new JSONObject();
			log.info("生成文件："+thumbnailFilePathName);
			obj.put("name", smallFileName);
			obj.put("url", nginxPath + "/" +smallFileName);//生成缩略图
			return Results.successWithData(obj);
		} catch (Exception e) {
			e.printStackTrace();
			return Results.failure("系统异常，图片上传失败");
		}

	}