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

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

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

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)
  });
}

最后附上成品,至于上传成功后的样式,可根据上传成功拼接的文件路径自行设计和调整。
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/149820.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号