1.依赖
"dependencies": {
"@aws-sdk/client-s3": "^3.583.0",
"@aws-sdk/s3-request-presigner": "^3.583.0",
"@element-plus/icons-vue": "^2.3.1",
"@tinymce/tinymce-vue": "^5.1.1",
"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.12",
"axios": "^1.6.8",
"element-plus": "^2.7.3",
"tinymce": "^7.1.0",
"vue": "^3.4.21",
"vue-router": "^4.3.2"
},
2.demo示例
<template>
<div>
</div>
<div style="height: 10px;"></div>
<div>
<el-form label-width="auto" style="max-width: 1000px">
<el-row>
<el-col :span="12">
<el-form-item>
</el-form-item>
</el-col>
<el-form-item>
<el-button @click="getObject">获取文件</el-button>
<el-button @click="getsignUrl(false)">获取下载文件地址</el-button>
<el-button @click="getsignUrl(true)">下载文件</el-button>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="单文件上传">
<input type="file" @change="onchangeFile" />
</el-form-item>
<el-form-item label="上传按钮">
<el-button @click="uploadFile">文件上传</el-button>
</el-form-item>
<el-col :apan="12">
<el-form-item label="分块文件上传">
<input type="file" @change="onchangeFile" />
</el-form-item>
<el-form-item label="上传按钮">
<el-button @click="uploadPartFile">分片文件上传</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script lang="ts" setup>
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { GetObjectCommand, PutObjectCommand,S3Client,
CreateMultipartUploadCommand,CreateMultipartUploadCommandOutput
,UploadPartCommand ,CompleteMultipartUploadCommand,
CompleteMultipartUploadCommandOutput} from "@aws-sdk/client-s3";
import { defineComponent,ref } from 'vue';
const selectedFile = ref<File | null>(null);
const localFilePath = 'D:\\Download\\-20210610034614272.jpg';
const client = new S3Client({
region:"cn-east-1",
endpoint:"http://127.0.0.1:9001",
credentials:{
accessKeyId:"minioadmin",
secretAccessKey:"minioadmin"
},
})
const getObject =async()=>{
const commend = new GetObjectCommand({
Bucket: "alldobucket",
Key: "-20210610034614272.jpg",
});
try{
const res = await client.send(commend)
console.log(res.Body)
}catch(err){
}
}
const getsignUrl=async(down:boolean)=>{
const commend = new GetObjectCommand({
Bucket: "alldobucket",
Key: "-20210610034614272.jpg",
});
const res = await getSignedUrl(client,commend,{expiresIn:3600})
if(down){
downLoadFile(res)
}
console.log("获取临时url==",res)
}
const downLoadFile =(url:string)=>{
const a = document.createElement("a");
a.href = url;
a.download = "-20210610034614272.jpg";
a.style.display='none';
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
const onchangeFile =(e:Event)=>{
debugger
const input = e.target as HTMLInputElement
const files = input.files
if(files&&files.length>0){
selectedFile.value = files[0]
}
}
const uploadFile =async()=>{
if(!selectedFile.value){
alert("未选中任何文件")
return;
}
const commend = new PutObjectCommand({
Bucket: "alldobucket",
Key:"test001002.jpg",
Body:selectedFile.value,
});
try{
const res = await client.send(commend)
console.log("上传文件返回信息",res)
}catch(err){
}
}
const uploadPartFile=async ()=>{
startUploadPart("uploadPart_20240528.mp4","alldobucket")
}
const createMuitipart =async (bucketName:string,key:string)=>{
const createUploadid = await client.send(
new CreateMultipartUploadCommand({
Bucket: bucketName,
Key: key,
}),
);
return createUploadid
}
function splitFileIntoChunks(file: File, chunkSize: number = 1024 * 1024 * 5) { // 5MB
debugger
const chunks: Blob[] = [];
let start = 0;
let end = Math.min(file.size, start + chunkSize);
while (start < file.size) {
const chunk = file.slice(start, end);
chunks.push(chunk);
start = end;
end = Math.min(file.size, start + chunkSize);
}
return chunks;
}
const uploadPromises:any = [];
// Multipart uploads require a minimum size of 5 MB per part.
const startUploadPart =async (key:string,bucketName:string)=>{
const file = selectedFile.value as File
debugger
const chunks = splitFileIntoChunks(file)
console.log("文件分片大小:",chunks.length)
const createout = await createMuitipart(bucketName,key)
const uploadId = createout.UploadId
for (let i = 0; i < chunks.length; i++) {
uploadPromises.push(
client.send(
new UploadPartCommand({
Bucket: bucketName,
Key: key,
UploadId: uploadId,
Body: chunks[i],
PartNumber: i + 1,
}),
)
.then((d) => {
console.log("Part", i + 1, "uploaded");
return d;
}),
);
}
const uploadResults = await Promise.all(uploadPromises);
const completeout:CompleteMultipartUploadCommandOutput = await client.send(
new CompleteMultipartUploadCommand({
Bucket: bucketName,
Key: key,
UploadId: uploadId,
MultipartUpload: {
Parts: uploadResults.map(({ ETag }, i) => ({
ETag,
PartNumber: i + 1,
})),
},
}),
);
console.log("上传完成",completeout.ETag)
}
</script>