vue+el-upload(封装华为云OBS上传文件)前端直传

今天有个需求,把项目中上传文件从后台服务端搬到华为云OBS上,找了好多资料发现好多博主并没写用什么调用,而是把华为云文档搬过来,特封装了一个完成组件复用,下面话不多说直接上代码

注释:代码中###是需要填写自己东西的






以上代码为封装的组件代码,需要引入父组件后调用配置

下面图为组件调用,注册跟引入就不用我多说了吧,不会的自行百度

在这里插入图片描述

其中需要npm 安装 vue-uuid 命令如下

 npm install --save vue-uuid

另需要安装OBSnpm包

npm i esdk-obs-browserjs

注:华为云前端直接上传的话会出现跨域报错,把华为云OBS CORS跨域规则设置一下

vue+el-upload(封装华为云OBS上传文件)前端直传_第1张图片
我设置的规则全部打开了

vue+el-upload(封装华为云OBS上传文件)前端直传_第2张图片

访问路径!!! 代码中注释也有写

browserjs的sdk在上传的回调中没有返回文件访问地址, 所以我们可以自己进行拼接

‘https://’ + bucket + ‘.obs.cn-north-4.myhuaweicloud.com/’ + key
bucket是桶名, bucket后面的字符串是 endPoint, 一般endPoint是

https://obs.cn-north-4.myhuaweicloud.com
去掉https即可. 最后的key则是文件名, 或文件路径+文件名

至此就可以上传+访问了,感谢小伙伴们的观看,如果帮到了你,请给我点个赞吧 谢谢~笔芯

vue+el-upload(封装华为云OBS上传文件)前端直传_第3张图片
vue+el-upload(封装华为云OBS上传文件)前端直传_第4张图片
CSDN私信我,接私活

你可能感兴趣的:(vue.js,前端,华为云,OBS)