需要背景
因为现有的后盾管理系统,上传的视频越来越大,加上上传视频较慢,后端小哥提出间接从前端上传视频或者其余文件到阿里云OSS存储。
- 阿里云OSS
阿里云OSS文档介绍,这里不做过多赘述
装置
本来在最开始的时候,是应用node版本的SDK,最开始应用的[nodejs版本]
代码如下
async function put() {
try {
let result = await client.put('qq.mp4', fileObj);
console.log(result);
} catch (err) {
console.log(keyObject.AccessKeyId);
console.log(keyObject.AccessKeySecret);
console.log(keyObject.SecurityToken);
console.log(err);
}
}
put();
开始上传图片的时候还没有翻车,然而上传超过30多M的时候,就翻车了,在阿里云OSS后盾查看文件大小为0KB
原本是想用fs模块来操作文件的,然而发现fs在浏览器端,没法儿应用所以就放弃了nodejs版本的SDK
browser版本
前面认真查阅文档, 发现browser版本SDK有一个片段上传的文档,于是就采纳了[browser]版本。
应用 browser版本的SDK反对片段上传,同时能够通过片段上传返回回来的进度,制作进度条提醒,不便操作业务逻辑
let ossConfig = {
region: 'oss-cn-hangzhou',
//云账号AccessKey有所有API拜访权限,倡议遵循阿里云平安最佳实际,部署在服务端应用RAM子账号或STS,部署在客户端应用STS。
accessKeyId: keyObject.AccessKeyId,
accessKeySecret: keyObject.AccessKeySecret,
stsToken: keyObject.SecurityToken,
bucket: 'wesmart-app'
}
let tempCheckpoint;
// 定义上传办法。
async function multipartUpload() {
try {
// object-key能够自定义为文件名(例如file.txt)或目录(例如abc/test/file.txt)的模式,实现将文件上传至以后Bucket或Bucket下的指定目录。
let result = await client.multipartUpload('02', fileObj, {
progress: function (p, checkpoint) {
// 断点记录点。浏览器重启后无奈间接持续上传,您须要手动触发上传操作。
tempCheckpoint = checkpoint;
console.log(p);
console.log(checkpoint);
},
mime: 'video/mp4'
})
} catch (e) {
console.log(e);
}
}
- client.multipartUpload办法
- 第一个参数为自定义的上传文件的名称,倡议应用工夫戳进行后缀命名,保障文件的唯一性,不会被笼罩
- 第二个参数为文件 回调函数progress,能够查看上传的进度以及文件的相干信息
注意事项
下面须要的对象字段能够通过阿里云后盾OSS进行查看,在开发的过程中,集体倡议通过申请后端返回的相干key值进行操作
在上传代码的时候,应用的put申请,而且刚开始会报错跨域的问题,须要在阿里云OSS进行配置容许申请
Exresponse Header设置为etag
源码
import React, { useState, useEffect } from 'react';
import axios from "axios";
const OSS = require('ali-oss');
class Example extends React.Component {
state = {
count: 0,
keyObject: {},
upfile: "",
}
componentDidMount() {
this.getData();
}
getData() {
let that = this;
axios.get('获取keyId的接口地址')
.then(function (response) {
console.log(response);
let { status, data } = response;
if (status == 200) {
that.setState({
keyObject: data
});
}
})
.catch(function (error) {
console.log(error);
});
}
handleUpload() {
let { keyObject, upfile } = this.state;
var fileObj = document.getElementById("file").files[0];
console.log(fileObj);
console.log(keyObject);
let ossConfig = {
region: 'oss-cn-hangzhou',
//云账号AccessKey有所有API拜访权限,倡议遵循阿里云平安最佳实际,部署在服务端应用RAM子账号或STS,部署在客户端应用STS。
accessKeyId: keyObject.AccessKeyId,
accessKeySecret: keyObject.AccessKeySecret,
stsToken: keyObject.SecurityToken,
bucket: 'wesmart-app'
}
let client = new OSS({
region: 'oss-cn-hangzhou',
//云账号AccessKey有所有API拜访权限,倡议遵循阿里云平安最佳实际,部署在服务端应用RAM子账号或STS,部署在客户端应用STS。
accessKeyId: keyObject.AccessKeyId,
accessKeySecret: keyObject.AccessKeySecret,
stsToken: keyObject.SecurityToken,
bucket: 'wesmart-app'
});
// async function put() {
// try {
// let result = await client.put('qq.mp4', fileObj);
// console.log(result);
// } catch (err) {
// console.log(keyObject.AccessKeyId);
// console.log(keyObject.AccessKeySecret);
// console.log(keyObject.SecurityToken);
// console.log(err);
// }
// }
// put();
let tempCheckpoint;
// 定义上传办法。
async function multipartUpload() {
try {
// object-key能够自定义为文件名(例如file.txt)或目录(例如abc/test/file.txt)的模式,实现将文件上传至以后Bucket或Bucket下的指定目录。
let result = await client.multipartUpload('02', fileObj, {
progress: function (p, checkpoint) {
// 断点记录点。浏览器重启后无奈间接持续上传,您须要手动触发上传操作。
tempCheckpoint = checkpoint;
console.log(p);
console.log(checkpoint);
},
mime: 'video/mp4'
})
} catch (e) {
console.log(e);
}
}
// 开始分片上传。
multipartUpload();
// 暂停分片上传。
client.cancel();
// 复原上传。
let resumeclient = new OSS(ossConfig);
async function resumeUpload() {
try {
let result = await resumeclient.multipartUpload('02', fileObj, {
progress: function (p, checkpoint) {
tempCheckpoint = checkpoint;
console.log(p);
console.log(checkpoint);
},
checkpoint: tempCheckpoint,
mime: 'video/mp4'
})
} catch (e) {
console.log(e);
}
}
resumeUpload();
}
handleChange(e) {
e.persist();
this.setState({ upfile: e.target.value });
}
render() {
const { upfile } = this.state;
return (
<div>
<script type="text/javascript" src="http://gosspublic.alicdn.com/aliyun-oss-sdk-x.x.x.min.js"></script>
<p><input id="file" type="file" onChange={this.handleChange.bind(this)} value={upfile} /></p>
<button onClick={this.handleUpload.bind(this)}>
上传
</button>
</div>
)
}
}
export default Example;
文章集体博客地址:前端(react)上传到阿里云OSS存储 实例
发表回复