使用 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
1
nigelvon 2019-09-25 16:53:40 +08:00
{ 'image': $file } 换成 formdata
|
3
jtwor 2019-09-25 17:19:52 +08:00
用 formdata 不行就先判断好是 传有问题 还是接收有问题
|
4
baiyi 2019-09-25 17:22:10 +08:00
axios data 是不是多了一个 image,直接 data: formdata 呢
|
6
nigelvon 2019-09-25 17:26:41 +08:00
不行估计是$file 有问题,建议 f12 截图一下 network 里的详细信息
|
9
redbuck 2019-09-25 23:17:31 +08:00 via Android
去掉 headers 里的 content-type
|
10
redbuck 2019-09-25 23:23:26 +08:00 via Android
formdata 其实就是用一个 boundary 分割序列化的字符串,你指定了 content-type 但是没有指定 boundary,导致服务端不知道怎么去分割反序列化你的 formdata,就解析失败了。
实际上 axios 新版本应该修改了,data 是 formdata 实例时,会直接无视用户指定的 content-type |
11
PeiXyJ OP ```
$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 替换到文本原位置![...](0) -> ![...](url) // // $vm.$img2Url 详情见本页末尾 // }) } ``` 在这样输出后,我发现 console.log($file) console.log(formData) 在$file 是有内容的 在 formdata 中没有$file 的内容 |
12
PeiXyJ OP |