文章目录

解决思路实践工具类uploadOss.js封装上传组件NewUpload调用上传组件

遇到的问题从oss获取下载链接错误分片上传报错 - ETag配置取消上传STS token 常见问题有效期多个Token是否同时有效

总结

      以前的项目上传及下载都是web端上传至服务端，服务器端再上传至OSS，小文件这种方案可以接受，但文件大了性能就会超级糟糕（浏览器崩溃也是常态）！所以呢，不得不探索web端直传oss方案。       探索过程中若采用最简单方式-将oss配置到前端，appId和appSecret会全部暴露！所以本文采用STS临时访问凭证访问OSS（需要服务器端提供stsToken接口），STS相关文档请查看官网。

解决思路

引入ali-oss依赖，版本号："ali-oss": "^6.17.1"定义oss工具js文件，uploadOss.js封装ElementUI的el-upload组件NewUpload在界面中引用NewUpload组件并使用

工程目录

├── src

│ ├── api # 服务端API

│ │ ├── oss.js # 定义服务端API：stsToken

│ └── components # 封装组件

│ ├── Upload

│ ├── index.vue

│ ├── uploadOss.js

├── views # 视图

│ ├── pay

│ │ ├── index.vue

├── package.json # 依赖

实践

工具类uploadOss.js

该工具类包含三个方法：

分片上传获取oss文件临时链接设置取消上传标志位

const OSS = require('ali-oss')

import {

stsToken

} from '@/api/oss.js'

let ossConfig = null;

// 取消上传控制项

let isCancel = false;

// 设置客户端请求访问凭证的地址

const OssFunc = async() => {

let res = await stsToken();

ossConfig = res.data;

const client = new OSS({

// yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。

region: 'oss-cn-hangzhou',

accessKeyId: ossConfig.accessKeyId,

accessKeySecret: ossConfig.accessKeySecret,

stsToken: ossConfig.securityToken,

bucket: ossConfig.bucketName,

timeout: 600000,

// HTTPS (secure: true) or HTTP (secure: false) protocol

secure: false,

refreshSTSTokenInterval: 3000000,

refreshSTSToken: stsToken().then(res => {

if (res.status === 0) {

console.log('成功刷新oss token');

ossConfig.accessKeyId = res.data.accessKeyId;

ossConfig.accessKeySecret = res.data.accessKeySecret;

ossConfig.securityToken = res.data.securityToken;

}

})

});

return client;

};

// 分片上传方法（没有设置分片相关设置，采用默认）

async function put(fileName, file) {

try {

let oss = await OssFunc();

const result = await oss.multipartUpload(fileName, file, {

'headers': {

'Access-Control-Allow-Origin': '*',

},

'progress': (progress) => {

// console.log('progress:', progress)

if (isCancel) {

oss.cancel();

// 复位

isCancel = false;

}

}

});

return result;

} catch (e) {

console.log(e);

}

}

// 设置取消上传标志位为true

async function cancelUpload() {

isCancel = true;

return true;

}

// 获取oss文件临时路径

async function getUrl(name) {

try {

let oss = await OssFunc();

const result = await oss.signatureUrl(name);

return result;

} catch (e) {

console.log(e);

}

}

export {

put,

getUrl,

cancelUpload,

}

封装上传组件NewUpload

调用上传组件

包含上传按钮及下载显示

遇到的问题

从oss获取下载链接错误

使用ali-oss中signatureUrl(name: string, options?: OSS.SignatureUrlOptions): string;获取oss文件临时访问路径，提示如下错误：

错误1：Access denied by authorizer’s policy. 错误2：You have no right to access this object because of bucket acl.

在官网上寻找解决案例，发现是配置的问题（NOTE：若在阿里云管理平台和在代码中分别配置账户权限，只取交集！），可参考官方解决方案- 教程示例：使用RAM Policy控制OSS的访问权限

{

"Version":"1",

"Statement":[

{

"Effect":"Allow",

"Action":[

"oss:ListObjects"

],

"Resource":[

"acs:oss:*:*:examplebucket"

],

"Condition":{

"StringLike":{

"oss:Prefix":[

"Development",

"Development/*"

]

}

}

},

{

"Effect":"Allow",

"Action":[

"oss:GetObject",

"oss:PutObject",

"oss:GetObjectAcl"

],

"Resource":[

"acs:oss:*:*:examplebucket/Development/*"

]

}

]

}

分片上传报错 - ETag配置

Please set the etag of expose-headers in OSS

使用OSS分片上传功能上传文件时报“Please set the etag of expose-headers in OSS”错误

取消上传

官方推荐方案：调用OSS的JS SDK实现取消分块上传及续传

核心点：调用分片上传时，在接口MultipartUploadOptions中属性progress进行取消动作

/**

* Upload file with OSS multipart.

*/

multipartUpload(name: string, file: any, options: OSS.MultipartUploadOptions): Promise;

interface MultipartUploadOptions {

/** the number of parts to be uploaded in parallel */

parallel?: number | undefined;

/** the suggested size for each part */

partSize?: number | undefined;

/** the progress callback called after each successful upload of one part */

progress?: ((...args: any[]) => any) | undefined;

/** the checkpoint to resume upload, if this is provided, it will continue the upload from where interrupted, otherwise a new multipart upload will be created. */

checkpoint?: Checkpoint | undefined;

meta?: UserMeta | undefined;

mime?: string | undefined;

callback?: ObjectCallback | undefined;

headers?: object | undefined;

timeout?: number | undefined;

/** {Object} only uploadPartCopy api used, detail */

copyheaders?: object | undefined;

}

STS token 常见问题

RAM角色和STS Token常见问题

有效期

STS Token的有效期最小值为900秒，最大值为角色最大会话时间设置的值，默认值为3600秒。

多个Token是否同时有效

STS Token在过期之前都是有效的，无论是否创建了新的STS Token。

总结

每一次解决问题，都开启了一片新天地~ 还真是那句话：学无止境！

好文推荐

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：