vue3+Ts+element-plus+Upload+阿里云OSS前端直传组件二次封装
最近项目中上传文件需要用阿里云的OSS上传，在此之前也没有接触过。一开始项目leader转发了一个关于【前端OSS直传】链接https://help.aliyun.com/document_detail/31926.html给我，所以我一开始研究的是用最简单的方法：引入一个ali-oss的npm包
npm install ali-oss -S阿里云关于第一种简单方法文档链接：https://help.aliyun.com/document_detail/120092.htm?spm=a2c4g.11186623.0.0.74366fedJb1Pmx#section-iy3-bfe-7mn
一开始也没有太仔细看，直到后端那边准备就绪我这边开始做的时候才发现这种方法和我项目中用的element-plus的upload组件匹配度不高。由于upload的二次封装已经提前做好了，我也不想改，就在网上看看还有没有其他的方法。功夫不负有心人啊，总算找到了：https://blog.csdn.net/qq_34761385/article/details/121352962，代码如下：
![]()
这里的filePolicy是一个promise异步请求，主要获取阿里云的上传秘钥。代码如下:
import request from '@/request/request'export function filePolicy() {return new Promise((resolve, reject)=>{request.get('/user/file/policy',{}).then(res=>{console.log("秘钥：",res.data);resolve(res);}).catch(err=>{console.log("网络错误",err);});})
}
我直接拷贝了上面的代码，在本地测试遇到如下问题：
- 上传文件upload有的时候post方法调的url是本地项目服务地址（本地前端服务地址：localhost:3000），造成这额原因是在请求filePolicy这个接口的时候还没有响应结果，upload组件的【action】属性值还未获取到但是在before-upload钩子函数中没有做相应的处理，upload组件就已经在执行上传（post）操作，解决办法见代码
- 解决第一个问题最后总算是上传成功，但是OSS阿里云那边不返回上传文件的地址，阿里云服务没有响应内容；
- 最后通过查资料了解到图片地址是固定变量拼接的，由于我们的有权限设置，所以地址后面还得加`${OSS_FLAG.host}/${basedata.value.key}?OSSAccessKeyId=${basedata.value.OSSAccessKeyId}&Expires=${Expires.value}&Signature=${basedata.value.signature}`，加了之后由于有时间限制，时间一到图片就会报403的错误，解决办法：上传成功在on-success钩子函数中处理，将图片地址改为本地的地址
下面是我的完整代码如下：
upload组件：
{{ tips }} 父组件：
后端filePolicy接口返回参数如下
方法二阿里云文档地址：https://help.aliyun.com/document_detail/31926.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！