大家好，又见面了，我是你们的朋友全栈君。
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)
});
}
最后附上成品，至于上传成功后的样式，可根据上传成功拼接的文件路径自行设计和调整。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/149820.html原文链接：https://javaforall.net
