前言
阿里云oss上传文件蕴含有好多SDK，个别像客户端的百度云盘这样的C端会应用如java相干的SDK，而浏览器端，也就是web端最好应用browser.js相干的SDK,上面就来解说下如何应用，心愿可能帮忙到大家。
配置ram权限获取sts token和跨域反对
在应用阿里云OSS上传文件之前，要提前配置好ram相干权限，官网文档有阐明，具体请看应用STS长期拜访凭证拜访OSS，配置时，要留神两点：
1、因为会应用上传和下载两种权限，所以应该应用上面权限策略（xxx为你的门路）：
{ "Version": "1", "Statement": [ { "Effect": "Allow", "Action": [ "oss:PutObject", "oss:GetObject" ], "Resource": [ "acs:oss:*:*:xxx", "acs:oss:*:*:xxx/*" ] } ]}配置好之后，咱们再来配置后盾，返回sts token给前端
@Override public AssumeRoleResponse getAcsForUploadFile(String userName) { // STS接入地址，例如sts.cn-hangzhou.aliyuncs.com。 String endpoint = aliyunOssConfig.getRamStsEndpoint(); // 填写步骤1生成的拜访密钥AccessKey ID和AccessKey Secret。 String AccessKeyId = aliyunOssConfig.getRamAccessKeyId(); String accessKeySecret = aliyunOssConfig.getRamAccessKeySecret(); // 填写步骤3获取的角色ARN。 String roleArn = aliyunOssConfig.getRamRoleArn(); // 自定义角色会话名称，用来辨别不同的令牌，例如可填写为SessionTest。 String roleSessionName = userName; // 以下Policy用于限度仅容许应用长期拜访凭证向指标存储空间examplebucket上传文件。 // 长期拜访凭证最初取得的权限是步骤4设置的角色权限和该Policy设置权限的交加，即仅容许将文件上传至指标存储空间examplebucket下的exampledir目录。// String policy = "{" +// " \"Version\": \"1\", " +// " \"Statement\": [" +// " {\n" +// " \"Action\": [" +// " \"oss:PutObject\"" +// " ]," +// " \"Resource\": [" +// " \"acs:oss:*:*:com-seaurl-cdn/space\"," +// " \"acs:oss:*:*:com-seaurl-cdn/space/*\"," +// " ]," +// " \"Effect\": \"Allow\"" +// " }" +// " ]" +// "}"; try { // regionId示意RAM的地区ID。以华东1（杭州）地区为例，regionID填写为cn-hangzhou。也能够保留默认值，默认值为空字符串（""）。 String regionId = aliyunOssConfig.getRegion(); // 增加endpoint。实用于Java SDK 3.12.0及以上版本。 DefaultProfile.addEndpoint(regionId, "Sts", endpoint); // 增加endpoint。实用于Java SDK 3.12.0以下版本。 // DefaultProfile.addEndpoint("",regionId, "Sts", endpoint); // 结构default profile。 IClientProfile profile = DefaultProfile.getProfile(regionId, AccessKeyId, accessKeySecret); // 结构client。 DefaultAcsClient client = new DefaultAcsClient(profile); final AssumeRoleRequest request = new AssumeRoleRequest(); // 实用于Java SDK 3.12.0及以上版本。 request.setSysMethod(MethodType.POST); // 实用于Java SDK 3.12.0以下版本。 //request.setMethod(MethodType.POST); request.setRoleArn(roleArn); request.setRoleSessionName(roleSessionName); request.setPolicy(null); // 如果policy为空，则用户将取得该角色下所有权限。 request.setDurationSeconds(3600L); // 设置长期拜访凭证的无效工夫为3600秒。 final AssumeRoleResponse response = client.getAcsResponse(request); System.out.println("Expiration: " + response.getCredentials().getExpiration()); System.out.println("Access Key Id: " + response.getCredentials().getAccessKeyId()); System.out.println("Access Key Secret: " + response.getCredentials().getAccessKeySecret()); System.out.println("Security Token: " + response.getCredentials().getSecurityToken()); System.out.println("RequestId: " + response.getRequestId()); return response; } catch (com.aliyuncs.exceptions.ClientException e) { System.out.println("Failed："); System.out.println("Error code: " + e.getErrCode()); System.out.println("Error message: " + e.getErrMsg()); System.out.println("RequestId: " + e.getRequestId()); return null; } }2、设置跨域反对
如果设置了跨域规定还是不起作用，能够应用上面形式进行批改：
设置跨域规定后调用OSS时依然报“No 'Access-Control-Allow-Origin'”的谬误
上传文件(简略上传和分片上传)
下面配置好权限之后，接下来咱们来装置和应用
1、装置ali-oss
yarn add ali-oss2、初始化oss client
留神：getAcsForUploadFile()办法就是下面获取sts token的申请办法
//初始化oss client客户端 async function initOssClient() { let res = await dispatch(getAcsForUploadFile()) console.log('initOss=', res) if (res.payload.status === 0) { const resData = res.payload.data const client = new OSS({ secure: true, // yourRegion填写Bucket所在地区。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。 region: 'oss-cn-hangzhou', // 从STS服务获取的长期拜访密钥（AccessKey ID和AccessKey Secret）。 accessKeyId: resData.credentials.accessKeyId, accessKeySecret: resData.credentials.accessKeySecret, // 从STS服务获取的平安令牌（SecurityToken）。 stsToken: resData.credentials.securityToken, refreshSTSToken: async () => { // 向您搭建的STS服务获取长期拜访凭证。 const refreshRes = await dispatch(getAcsForUploadFile()) console.log('refreshSTSToken info=', refreshRes) if (refreshRes.payload.status === 0) { const refreshResData = refreshRes.payload.data return { accessKeyId: refreshResData.credentials.accessKeyId, accessKeySecret: refreshResData.credentials.accessKeySecret, stsToken: refreshResData.credentials.securityToken } } }, // 刷新长期拜访凭证的工夫距离，单位为毫秒。 refreshSTSTokenInterval: 3000000, // 填写Bucket名称。 bucket: 'xxx' }); if (client) { setOssClient(client) } } }3、上传文件
// 上传文件前判断单个文件是否超过500mb，如果超过不容许上传 function beforeUploadFile(file, fileList) { console.log('file=', file) const isLt500M = file.size / 1024 / 1024 > 500; if (isLt500M) { message.warning('超过最大文件上传大小500Mb'); return false } return true; // 不调用默认的上传办法 } // 上传文件状态回调 function onUploadFileChange(info) { console.log('info=', info) // 把没有status的文件过滤掉(没有status的文件阐明是勾销上传的文件) if (info.file.status) { setFileTaskDlg({ show: true, task: info }) if (info.file.status === 'done') { dispatch(getFileListByCid({ cid: query.cid })) } if (info.file.status === 'error') { dispatch(getFileListByCid({ cid: query.cid })) } } }// 自定义上传 function uploadFileToOss(options) { console.log('options=', options) const {file, onProgress, onSuccess, onError} = options return new Promise(async (resolve, reject) => { const filePath = `space/file/${me.name}/${file.name}` const fileType = getFileType(file.name) let result = null; // 判断文件是否超过100mb，如果超过则应用分片上传，否则应用简略上传 if (file.size / 1024 / 1024 > 100) { console.log('分片上传') // 分片上传，默认分片1Mb，如果想更改，请参考：https://help.aliyun.com/document_detail/383952.html result = await ossClient.multipartUpload(filePath, file, { progress: async (percent) => { onProgress({percent: percent * 100}) }, }).catch((error) => { onError(error) reject(error) }) } else { console.log('简略上传') // 简略上传 result = await ossClient.put(filePath, file, { progress: async (percent) => { onProgress({percent: percent * 100}) }, }).catch((error) => { onError(error) reject(error) }) } await uploadFileCallback(result, { file, filePath, fileType }, (res) => { onSuccess(res) resolve(result) }) }) } async function uploadFileCallback(result, data, callback) { const ossPath = result.res.requestUrls[0].split('?')[0] const url = ossPath.replace(/^http:\/\//i, 'https://') const newFileRes = { status: result?.res?.status, name: result?.name, url: url, } // 上传胜利之后往后台数据库插入一条文件数据 await dispatch(addFile({ fileName: data.file.name, filePath: data.filePath, fileSize: data.file.size, fileContentType: data.fileType, categoryId: query.cid, })) callback(newFileRes) }...<Upload beforeUpload={beforeUploadFile} customRequest={uploadFileToOss} showUploadList={false} withCredentials={true} disabled={btnUploadDisabled} onChange={onUploadFileChange}> <Button icon={<CloudUploadOutlined/>} disabled={btnUploadDisabled}>上传文件</Button></Upload>beforeUploadFile()办法是在上传文件之前做本人的业务逻辑解决，比方我这里的超过500mb的文件不容许上传
uploadFileToOss()是Upload组件自定义上传规定，所以你不必设置action等属性
onUploadFileChange()办法是上传文件时的变动回调，能够通过这个办法设置显示文件上传动静
下载文件(批量下载)
下载文件跟上传差不多，上面示例
function onDownload(d) { if (selectedRowKeys.length <= 0) { message.warning('请先抉择文件'); } else { console.log('selectedRowKeys=', selectedRowKeys) const filterFiles = files.filter(item => selectedRowKeys.includes(item.id)) console.log('filterFiles=', filterFiles) filterFiles.forEach(item => { const fileName = item.name const response = { 'content-disposition': `attachment; filename=${encodeURIComponent(fileName)}` } // 填写Object残缺门路。Object残缺门路中不能蕴含Bucket名称。 const url = ossClient.signatureUrl(item.path, {response}); const iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.style.height = 0; iframe.src = url; // 与前两种形式不同，iframe须要挂载到页面上能力触发申请 document.body.appendChild(iframe); setTimeout(() => { iframe.remove(); }, 1000); }) } }阐明：selectedRowKeys是我的文件列表抉择的文件ids汇合item.path是文件在oss的残缺门路，留神：不蕴含host和bucket-name，如：a/b/c.txt
总结
1、阿里云oss上传文件一开始我应用的是java sdk上传，发现不能在web端分片，于是应用了ali-oss组件包在浏览器端上传
2、要配置ram权限以及获取sts token还有跨域
援用
js实现单个文件下载，批量下载多个文件
async/await 捕捉谬误 捕捉catch
OSS + Ant Design Upload 网页直传
OSS文档：预览或下载文件
OSS文档