本项目用的第三方UI库是antdesign，所以在实现上传照片功能时利用了upload上传组件。
upload上传组件提供了两种方法上传服务器。第一种是使用默认的上传方法；第二种是使用customRequest通过覆盖默认的上传行为，可以自定义自己的上传实现。详情可参考：blog.csdn.net/lily_miao/a…。
文章中第二种方法是利用ajax方法上传的。那如果利用axios方法该如何上传呢？经过踩坑，总结如下：
1、上传至服务器时需要带多个参数，需利用FormData的append方法将其他参数添加进去。上传时仅传formData数据即可。
customRequest = (option) => {
const {appKey, categoryId } = this.requestPictureupload
//以formData表单对象上传
let formData = new FormData();
formData.append("file", option.file);
formData.append("appKey", appKey);
formData.append("categoryId", categoryId);
//uploadPicture为axios封装的方法，形参只有data数据
uploadPicture(formData).then(ref => {
if (ref.data.errorMsg == "上传成功") {
// console.log(ref.data.data)
}
})
}
//请求拦截器部分配置
axios.interceptors.request.use(config => {
let csrfToken = localStorage.getItem("token");
config.headers["token"] = csrfToken;
if(config.url=="api/v1/picture/upload"){
//以formData上传时请求头Content-Type类型要改为multipart/form-data，所以加了判断
config.headers['Content-Type']="multipart/form-data";
}else{
config.headers['Content-Type'] = 'application/json';
}
return config;
export const uploadPicture=(formData)=>{
//url暂时使用了前端代理跨域
return Http.post("api/v1/picture/upload",formData);}
（1）查看FormData()的打印数据。链接：www.cnblogs.com/gxp69/p/121…
（2）上传时network中的数据。
(3)axios请求参数设置。链接：www.kancloud.cn/yunye/axios…
(4)Content-Type的含义。链接：www.cnblogs.com/tugenhua070…
（5）js上传给后端服务器的两种方式。一种是以FormData表单形式上传（即键值对的形式），第二种是以base64数据格式上传。应提前跟后端确认好上传方式。
参考链接1：blog.csdn.net/qq_34664239…
参考链接2：juejin.cn/post/684490…
这篇文章也是customRequest方法上传的，挺不错。链接：github.com/react-compo…
未完，待续。。。
（1）上传一张照片和多张照片纸后端，前台显示每张上传状态；
（2）上传照片尺寸设置；
