vue3+element+plus使用awssdk

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>