axios上传文件以及遇到的问题_拦截el-upload的请求

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;
    }
})
1
2
3
4
5
6
7
8
9
10
11
12

最后是完整的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)
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

最后附上成品，至于上传成功后的样式，可根据上传成功拼接的文件路径自行设计和调整。