当前位置: 首页 > Web前端 > vue.js

当阿里oss图片上传组件

时间:2023-04-01 11:17:08 vue.js

项目需要上传大文件时,通过前端直接连接阿里oss是一个不错的选择。一方面不需要自己搭建文件服务器,另一方面可以节省服务器的带宽压力。在这里记录一下,虽然自己写的oss图片上传组件是直接从前端获取Token的,但是Token还是从后台获取的。这个时候后台大哥需要创建一个Token接口获取oss,然后就可以愉快的上传图片了。从“@/util/common”导入{getOssToken};constOSS=require("ali-oss");letclient;created(){getOssToken().then((res)=>{client=newOSS({//yourRegion填写Bucket所在区域。以华东1(杭州)为例,Region填写oss-cn-hangzhou.region:"oss-cn-hangzhou",//从STS服务获取的临时访问凭证临时访问凭证包括临时访问密钥(AccessKeyIdandAccessKeySecret)和安全令牌(SecurityToken)accessKeyId:res.data.accessKeyId,accessKeySecret:res.data.accessKeySecret,stsToken:res.data.securityToken,//填写Bucket名称。桶:“桶”,});});},我们还是使用熟悉的el-upload上传图片主要上传方式是改变el-upload默认的上传方式//oss上传图片asyncuploadBefore(file,loading,column){this.loading=真的;让fileName=this.product+'/'+newDate().getTime()+file.name;letresult=awaitclient.put("/picture/"+文件名,文件);this.imgList.push({名称:文件名,网址:this.url+文件名,文件名:文件名,});让_this=这个;setTimeout(function(){_this.loading=false;},600);},完整代码如下