vue3 + vite oss上传(一)

下周就要离开公司了,把手头上的事整理的差不多了,我的小伙伴被隔离要下周来才能交接,趁这个时间写点技术,之前处理了很多的oss、aws上传今天写下来,以后可能会用到,下面先说说oss的简单上传方式,因为分片上传最好100m以上,但这个分片上传呢,我们在开发服、测试服的时候都可以用,而生产环境因为运维那边配置了严格的权限,最后在生产环境用不了,还是用了简单上传,不管是简单上传还是分片上传,百度都有方法,只是参数不对就会影响上传

1、先说client.put简单上传的参数,需要引入oss的sdk

const params = {

    "dir":this.uploadData.dir, //路径

    "district":"CHN",

    "serviceType":1,

    "tenantId":'0'

}

这是传给后端签名的参数

let reg = new RegExp(".aliyuncs.com")

this.ossGetAccessUrlData = {...res.result, region: res.result.host.replace(reg, "")} //host的数据替换

this.client = new OSS({

    region: this.ossGetAccessUrlData.region, //桶所在区域 这个必须要,我看到很多文档没有的

    secure: true,  //设置secure为true,则使用HTTPS;设置secure为false,则使用HTTP

    policy: this.ossGetAccessUrlData.policy,

    accessKeyId: this.ossGetAccessUrlData.accessid, //通过阿里云控制台创建的AccessKey ID

    accessKeySecret: this.ossGetAccessUrlData.secret, //通过阿里云控制台创建的AccessKey Secret。

    bucket: this.ossGetAccessUrlData.bucket, //桶

    signature: this.ossGetAccessUrlData.signature //签名字符串

})

然后就可以this.client.put(this.uploadData.dir, this.file),下面是代码贴图


但是这种方式有个缺陷就是暴露了 secret,所以就换了post方式

1、post方式就直接简化了上传方式,就是唯一的缺点是不知道进度多少,但为了保密,运维同事就通过配置加速了上传,还挺快的

跟上面一样获取签名返回的数据ossGetAccessUrlData,下面就是上传了,不需要引入oss的sdk

let multipart_params =formData({

'key': dir, // 文件存储路径

    'policy': ossGetAccessUrlData.policy, // Policy表单域用于验证请求的合法性

    'success_action_status':200, // 文件上传成功服务器返回的状态

    'OSSAccessKeyId': ossGetAccessUrlData.accessid, //accessid

    'signature': ossGetAccessUrlData.signature,

    'file': file

});

//上传域名

const domain ='https://' + ossGetAccessUrlData.bucket +'.' + ossGetAccessUrlData.host;

//请求头配置

const config = {headers: {'Accept':'application/json, text/javascript, */*; q=0.01', 'Content-Type':'multipart/form-data'}}; // 配置请求头

//正式上传

let result =new Promise(async (resolve, reject) => {

//oss用post域名即可

    await axios.post(domain, multipart_params, config).then((res) => {

if (res.status ===200) {

resolve(domain +'/' + multipart_params?.get('key'))

}else {

reject(res)

}

})

})

return result;

就这样,分片上传呢用下面的代码,这里就不贴代码了

在我的AIOT项目upgradeManagement/deviceUpgrade/upgradeUpload.vue中,只为记录让自己记得,哈哈哈

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

相关阅读更多精彩内容

友情链接更多精彩内容