使用 axios 上传图片错误,但是使用 postman 可以上传

[PeiXyJ]

使用 axios 上传图片错误,但是使用 postman 可以上传

$imgAdd (pos, $file) {
      let vm = this.$refs.md
      // 第一步.将图片上传到服务器.
      let formdata = new FormData()
      formdata.append('image',$file)
      axios({
        headers: { 'Content-Type': 'multipart/form-data' },
        url: 'http://localhost:8080/api/v1/image/upload/markdown',
        method: 'post',
        data: { 'image': formdata }
      }).then((url) => {
        // 第二步.将返回的 url 替换到文本原位置![...](0) -> ![...](url)
        /**
           * $vm 指为 mavonEditor 实例，可以通过如下两种方式获取
           * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
           * 2. 通过$refs 获取: html 声明 ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
           */
        // vm.$img2Url(pos, url)
      }).catch(function (error) {
        alert(error)
      })
    }

java 中的错误信息为

org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

java 代码

@RequestMapping(value = "markdown")
    @ResponseBody
    public JsonData upload(@RequestParam("image") MultipartFile file) {
        if (file.isEmpty() || file.getSize() > FileSize.MB_COEFFICIENT) {
            return JsonData.buildError("文件不存在或者文件太大");
        }

        String name = file.getOriginalFilename();
        String suffixName = null;
        if (name != null) {
            suffixName = name.substring(name.indexOf(".") - 1);
        } else {
            suffixName = ".jpg";
        }
        String fileName = UUID.randomUUID() + suffixName;

        File markdownImageFile = new File(MARKDOWN_IMAGE_FILE +fileName);
        try {
            file.transferTo(markdownImageFile);
            return JsonData.buildSuccess(fileName);
        } catch (IOException e) {
            e.printStackTrace();
            return JsonData.buildError(e.getMessage());
        }
    }

麻烦大佬们帮忙看看外网测试地址 http://api.ngrok.peixy.top/api/v1/image/upload/markdown

[nigelvon]

{ 'image': $file } 换成 formdata

[PeiXyJ]

@nigelvon 不行,我测试过...

[jtwor]

用 formdata 不行就先判断好是 传有问题 还是接收有问题

[baiyi]

axios data 是不是多了一个 image，直接 data: formdata 呢

[optional]

@baiyi #4+1

[nigelvon]

不行估计是$file 有问题，建议 f12 截图一下 network 里的详细信息

[PeiXyJ]

@jtwor 传有问题控制台里的 content-type 缺值

[PeiXyJ]

@baiyi 这个发现了改过后尝试也不可以

[redbuck]

去掉 headers 里的 content-type

[redbuck]

formdata 其实就是用一个 boundary 分割序列化的字符串，你指定了 content-type 但是没有指定 boundary，导致服务端不知道怎么去分割反序列化你的 formdata，就解析失败了。

实际上 axios 新版本应该修改了，data 是 formdata 实例时，会直接无视用户指定的 content-type

[PeiXyJ]

```
$imgAdd (pos, $file) {
// 第一步.将图片上传到服务器.
let formData = new FormData()
formData.append('file', $file)
console.log($file)
console.log(formData)
let url = 'http://localhost:8080/api/v1/image/upload/markdown'
axios.post(url, formData).then(function (res) {
alert(res)
}).catch(function (error) {
alert(error)
})

// axios({
// url: 'http://localhost:8080/api/v1/image/upload/markdown',
// method: 'post',
// data: formdata,
// headers: { 'Content-Type': 'multipart/form-data' }
// }).then((url) => {
// // 第二步.将返回的 url 替换到文本原位置 -> 
// // $vm.$img2Url 详情见本页末尾
// })
}
```
在这样输出后,我发现
console.log($file)
console.log(formData)
在$file 是有内容的
在 formdata 中没有$file 的内容

[PeiXyJ]

@redbuck @baiyi @jtwor @nigelvon @optional 嗯,解决了,我用的框架是 d2 admin 它在 main 方法中给我过滤了 axios,导致传输失败.

[redbuck]

@PeiXyJ formData 直接打印看不到东西的,你的 formdata.get(key)

[PeiXyJ]

@redbuck 嗯我看到了