react + oss 实现文件管理
首先带大家来简单了解一下阿里云的对象存储oss
官方介绍很详细地址如下:阿里云OSS----Browser.js
前端开发可以只关注Browser.js
1、准备工作
通过阿里云账号开通OSS对象存储的服务,设置oss服务控制台跨域、访问、以及相关的一些配置要求
一般会将允许的methods全部勾选
安装SDK
有以下两种方式:
一、cdn引入
<!-- 引入在线资源 -->
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.1.min.js"></script>
<!-- 引入本地资源 -->
<script src="./aliyun-oss-sdk-6.18.1.min.js"></script>
二、npm安装开发SDK包
npm install ali-oss
可以使用import 或require方式去引入,忘记的小伙伴不妨去看看import、require的区别和用法
2、初始化
oss初始化有一些详细的配置,这里就不多说啦,直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--导入SDK文件-->
<script
type="text/javascript"
src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
></script>
<script type="text/javascript">
const client = new OSS({
// yourRegion填写Bucket所在地域。以华东1(杭州)为例,yourRegion填写为oss-cn-hangzhou。
region: 'yourRegion',
// 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// 从STS服务获取的安全令牌(SecurityToken)。
stsToken: 'yourSecurityToken',
// 填写Bucket名称,例如examplebucket。
bucket: "examplebucket",
});
</script>
</body>
</html>
更多的配置大家可以去参考这里!!!
正常开发过程中,一般不回去开通STS服务,获取到OSS的region, accessKeyId, accessKeySecret, bucket,就可以快速实现上传、下载、查看、拷贝、删除等文件操作。
3、快速入门
具体很具大家的需求来定, 如何只是单纯的文件存储管理,可以不去耗费人力去搭建STS服务,如果需要的话,打通STS Server的工作可以让服务端同步进行。
上传文件
需要大家提前了解一些概述:
将File对象、Blob数据以及OSS Buffer上传到OSS时,您可以使用简单上传方式
当您需要上传大于100 MB且小于48.8 TB的文件时,您可以使用分片上传的方式
在文件上传过程中因网络异常或程序崩溃导致文件上传失败时,可继续上传未完成的部分,您可以使用. 断点续传上传
大家可以点击相应标题详细去了解不同上传方式的用法和适用场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<input id="file" type="file" />
<button id="upload">上传</button>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
<script>
const client = new OSS({
// yourRegion填写Bucket所在地域。以华东1(杭州)为例,yourRegion填写为oss-cn-hangzhou。
region: "yourRegion",
// 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。
accessKeyId: "yourAccessKeyId",
accessKeySecret: "yourAccessKeySecret",
// 从STS服务获取的安全令牌(SecurityToken)。
stsToken: "yourSecurityToken",
// 填写Bucket名称。
bucket: "examplebucket",
});
// 从输入框获取file对象,例如<input type="file" id="file" />。
let data;
// 创建并填写Blob数据。
//const data = new Blob(['Hello OSS']);
// 创建并填写OSS Buffer内容。
//const data = new OSS.Buffer(['Hello OSS']);
const upload = document.getElementById("upload");
async function putObject(data) {
try {
// 填写Object完整路径。Object完整路径中不能包含Bucket名称。
// 您可以通过自定义文件名(例如exampleobject.txt)或文件完整路径(例如exampledir/exampleobject.txt)的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
// data对象可以自定义为file对象、Blob数据或者OSS Buffer。
const options = {
meta: { temp: "demo" },
mime: "json",
headers: { "Content-Type": "text/plain" },
};
const result = await client.put("examplefile.txt", data, options);
console.log(result);
} catch (e) {
console.log(e);
}
}
upload.addEventListener("click", () => {
const data = file.files[0];
putObject(data);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<button id="submit">上传</button>
<input id="file" type="file" />
<!--导入sdk文件-->
<script
type="text/javascript"
src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
></script>
<script type="text/javascript">
const client = new OSS({
// yourRegion填写Bucket所在地域。以华东1(杭州)为例,Region填写为oss-cn-hangzhou。
region: "yourRegion",
// 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。
accessKeyId: "yourAccessKeyId",
accessKeySecret: "yourAccessKeySecret",
// 从STS服务获取的安全令牌(SecurityToken)。
stsToken: "yourSecurityToken",
// 填写Bucket名称,例如examplebucket。
bucket: "examplebucket",
});
const headers = {
// 指定该Object被下载时的网页缓存行为。
"Cache-Control": "no-cache",
// 指定该Object被下载时的名称。
"Content-Disposition": "example.txt",
// 指定该Object被下载时的内容编码格式。
"Content-Encoding": "utf-8",
// 指定过期时间,单位为毫秒。
Expires: "1000",
// 指定Object的存储类型。
"x-oss-storage-class": "Standard",
// 指定Object标签,可同时设置多个标签。
"x-oss-tagging": "Tag1=1&Tag2=2",
// 指定初始化分片上传时是否覆盖同名Object。此处设置为true,表示禁止覆盖同名Object。
"x-oss-forbid-overwrite": "true",
// 设置该属性以后,同名文件上传会有警告错误
};
// 指定上传到oss的指定目录及文件名, 很关键。
// 服务端会给一个存放文件的目标dir dir + fileName + 唯一标识, 同时避免了同名文件覆盖的问题
const name = "exampleobject.txt";
// 获取DOM。
const submit = document.getElementById("submit");
const options = {
// 获取分片上传进度、断点和返回值。
progress: (p, cpt, res) => {
console.log(p);
},
// 设置并发上传的分片数量 最大1000。
parallel: 4,
// 设置分片大小。默认值为1 MB,最小值为100 KB, 最大值为5GB。
partSize: 1024 * 1024,
// headers,
// 自定义元数据,通过HeadObject接口可以获取Object的元数据。
meta: { year: 2020, people: "test" },
mime: "text/plain",
};
// 监听按钮。
submit.addEventListener("click", async () => {
try {
const data = document.getElementById("file").files[0];
// 分片上传。
const res = await client.multipartUpload(name, data, {
...options,
});
console.log(res);
} catch (err) {
console.log(err);
}
});
</script>
</body>
</html>
大家可以根据自己的需求场景去选择上传方式,还有断点续传等。
除了上传文件、还有下载、删除、查看文件列表等,在这里就不给大家一一介绍啦。
osss上传可以借助antd的upload, 采用自定义上传的方式,或者ant.design官方有自己案例
除了借助upload,也可以直接使用input file属性的标签。
不仅可以上传文件,也可以上传文件夹
常见的上传文件的类型
1、<input text="file" accept=".csv" /> cvs格式
2、<input text="file" accept="application/vnd.ms-excel"/> 上传.xls格式
3、<input text="fiel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/> 上传.xslx格式
4、<input type="file" accept="text/plain" /> 上传.png/.jpg/etc格式
5、<input type="file" accept="image/*" /> 上传图片格式
6、<input type="file" accept="text/html" /> 上传.htm,.html格式
7、<input type="file" accept="video/*" /> 上传video(.avi, .mpg, .mpeg, .mp4)格式
8、<input type="file" accept="audio/*" /> 上传audio(.mp3, .wav, etc)格式
9、<input type="file" accept=".pdf" /> 上传.pdf格式
10、<input type="file" accept=".zip" /> 上传.zip格式
11、<input type="file" accept=".zip" multiple /> 上传多个(multiple)
12、<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"> 如果限制两种文件格式,同时限制
13、上传文件夹 (注意 : 上传文件夹 只能上传文件夹,不可以和文件同时上传)
<input type="file" webkitdirectory /> 上传文件夹 (webkitdirectory)
大家可以根据自己的需要,自行借鉴, 希望可以帮到大家,下次再见