在使用阿里云OSS進行前端直傳時，首先我們需要去阿里云官網(wǎng)注冊自己的存儲桶，然后申請相關(guān)的accessKeyId和accessKeySecret，然后新建一個桶，為這個桶命名以及選擇對應(yīng)的地區(qū)。
然后可以根據(jù)自己的業(yè)務(wù)，封裝對應(yīng)的組件，以下是根據(jù)我自己的項目，所封裝的上傳組件，所用的是React技術(shù)棧文章來源：http://www.zghlxwxcb.cn/news/detail-834251.html
import OSS from "ali-oss";
import { plus } from '../apis/person/index'
import styles from './oss.module.less'
import { Input } from "antd";
import { useState } from "react";
const Oss = () => {
const [resourcesName, setResourcesName] = useState('')
const upload = () => {
const client = new OSS({
region: "", // 填寫桶的地區(qū)
accessKeyId: "", // 桶的key
accessKeySecret: "", // 桶的secret
bucket: "dd-robot-react", // 桶的名稱
});
const upload = document.getElementById("upload");
async function putObject(data: any) {
try {
const options = {
meta: { temp: "demo" },
mime: "json",
headers: {
"Content-Type": file.type
},
};
const result = await client.put(data.name, data, options)
console.log(result);
console.log(result.url);
const ossDomain = "dd-robot-react.oss-cn-beijing.aliyuncs.com"; // 替換為你的實際OSS域名
const fileUrl = `https://${ossDomain}/${data.name}`;
console.log(fileUrl);
let res = await plus({
data_link: result.url,
data_name: resourcesName,
type: 3
})
console.log(res);
} catch (e) {
console.log(e);
}
}
upload.addEventListener("click", () => {
const data = file.files[0];
console.log(data.name);
putObject(data);
});
}
return (
<>
<input id="file" type="file" className={styles.file} />
<Input
value={resourcesName}
onChange={(e) => setResourcesName(e.target.value)}
placeholder="請輸入文件名"
/>
<button id="upload" onClick={upload} className={styles.btn} style={{ marginTop: 10 }}>上傳資源</button>
</>
)
};
export default Oss;
下邊的代碼部分是分片上傳內(nèi)容，通常在上傳內(nèi)容較大的時候會使用分片上傳，代碼部分如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-834251.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" />
<!--導(dǎo)入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填寫B(tài)ucket所在地域。以華東1（杭州）為例，Region填寫為oss-cn-hangzhou。
region: "oss-cn-beijing",
// 從STS服務(wù)獲取的臨時訪問密鑰（AccessKey ID和AccessKey Secret）。
accessKeyId: "",
accessKeySecret: "",
// 填寫B(tài)ucket名稱，例如examplebucket。
bucket: "",
});
const headers = {
// 指定該Object被下載時的網(wǎng)頁緩存行為。
"Cache-Control": "no-cache",
// 指定該Object被下載時的名稱。
"Content-Disposition": "example.txt",
// 指定該Object被下載時的內(nèi)容編碼格式。
"Content-Encoding": "utf-8",
// 指定過期時間，單位為毫秒。
Expires: "1000",
// 指定Object的存儲類型。
"x-oss-storage-class": "Standard",
// 指定Object標(biāo)簽，可同時設(shè)置多個標(biāo)簽。
"x-oss-tagging": "Tag1=1&Tag2=2",
// 指定初始化分片上傳時是否覆蓋同名Object。此處設(shè)置為true，表示禁止覆蓋同名Object。
"x-oss-forbid-overwrite": "true",
};
// 指定上傳到examplebucket的Object名稱，例如exampleobject.txt。
// const name = "exampleobject.txt";
// 獲取DOM。
const submit = document.getElementById("submit");
const options = {
// 獲取分片上傳進度、斷點和返回值。
progress: (p, cpt, res) => {
console.log(p);
},
// 設(shè)置并發(fā)上傳的分片數(shù)量。
parallel: 4,
// 設(shè)置分片大小。默認(rèn)值為1 MB，最小值為100 KB。
partSize: 1024 * 100,
// headers,
// 自定義元數(shù)據(jù)，通過HeadObject接口可以獲取Object的元數(shù)據(jù)。
meta: { year: 2020, people: "test" },
mime: "text/plain",
};
// 監(jiān)聽按鈕。
submit.addEventListener("click", async () => {
try {
const data = document.getElementById("file").files[0];
const fileName = data.name;
// 分片上傳。
const res = await client.multipartUpload(fileName, data, {
...options,
// 設(shè)置上傳回調(diào)。
// 如果不涉及回調(diào)服務(wù)器，請刪除callback相關(guān)設(shè)置。
// callback: {
// // 設(shè)置回調(diào)請求的服務(wù)器地址。
// url: "http://examplebucket.aliyuncs.com:23450",
// // 設(shè)置回調(diào)請求消息頭中Host的值，即您的服務(wù)器配置Host的值。
// host: "yourHost",
// /* eslint no-template-curly-in-string: [0] */
// // 設(shè)置發(fā)起回調(diào)時請求body的值。
// body: "bucket=${bucket}&object=${object}&var1=${x:var1}",
// // 設(shè)置發(fā)起回調(diào)請求的Content-Type。
// contentType: "application/x-www-form-urlencoded",
// customValue: {
// // 設(shè)置發(fā)起回調(diào)請求的自定義參數(shù)。
// var1: "value1",
// var2: "value2",
// },
// },
});
console.log(res);
} catch (err) {
console.log(err);
}
});
</script>
</body>
</html>
到了這里，關(guān)于如何使用阿里云OSS進行前端直傳以及分片上傳的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![uniapp - [小程序 / H5網(wǎng)頁] “純前端“ 將文件上傳到阿里云 OSS，全端通用的阿里云 OSS 直傳音視頻、圖片、word、excel、ppt、office 文檔（全程無需后端穩(wěn)定可靠）](https://imgs.yssmx.com/Uploads/2024/02/518655-1.gif)
