大家好，又见面了，我是你们的朋友全栈君。

axios上传文件以及遇到的问题

1，这里上传文件使用的是elementUI的上传，也用原生的input上传写了，但是没有时间做多文件上传，下面会把代码贴出。
2，这里上传文件我是先获取OSS权限和上传路径，然后再上传。但是权限获取成功后，上传到阿里云服务器时，OPTION请求报403。原因是项目中axios设置了拦截器，添加了config配置，但是在axios发送OPTION测试接口是否有权限访问的时候，config的配置必须的干净的，所以这里我的处理方式的单独create一个axios请求。

let instance = axios.create();
instance.post(obj.host, formData).then(res => { 
   
	//oss是请求的文件上传路径接口返回的，formData是上传的文件
    if (res) { 
   
      //拼接上传后的文件路径，
      const fileUrl = obj.host + '/' + obj.imageDir + "/" + imageName + '/' + file.name;
      //将拼接成功的路径保存
      let newUpLoadArr = this.upLoadArray;
      newUpLoadArr.push(fileUrl);
      this.upLoadArray = newUpLoadArr;
    }
})

最后是完整的axios上传文件的代码，时间过于仓促就没有封装组件。

<el-upload
class="upload-demo"
multiple
ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false"
:on-change="handleChange"
:http-request="httpRequest"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
//原生input输入框文件上传
//<input type="file" @change="handleChange">
//文件列表移除文件时的钩子
handleRemove(file) { 

this.upLoadArray = this.upLoadArray.filter(item => !item.includes(file.name));
},
//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
handleChange(file, fileList){ 

//上传文件大小限制，Math.pow(2,20)就是1024*1024，需要显示多少兆就把10改成多少兆
if (file.size > (10 * Math.pow(2, 20))) { 

this.fileList = [];
this.$message({ 

type: 'warning',
message: '文件大小超过10M，请重新选择文件！'
});
return;
}
this.fileList = fileList;
this.getOSS(file)
},
//覆盖请求
httpRequest(){ 
},
//获取OSS权限
getOSS(file){ 

get('/oss').then(res => { 

if (res) { 

this.uploadToOss(res, file);
}
})
},
//上传服务器
uploadToOss (obj, file) { 

let imageHash = "" + Math.random()
let imageName = imageHash.substring(2, imageHash.length)
let formData = new FormData();
formData.append('key', obj.imageDir + '/' + imageName + '/' + file.name);
formData.append('policy', obj.policy);
formData.append('OSSAccessKeyId', obj.accessId);
formData.append('success_action_status', 200);
formData.append('signature', obj.signature);
formData.append("file", file);
let instance = axios.create();
instance.post(obj.host, formData).then(res => { 

if (res) { 

const fileUrl = obj.host + '/' + obj.imageDir + "/" + imageName + '/' + file.name;
let newUpLoadArr = this.upLoadArray;
newUpLoadArr.push(fileUrl);
this.upLoadArray = newUpLoadArr;
}
}).catch(err => { 

console.log(err)
});
}