devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue使用AWS s3进行大文件的分片上传、断点续传、下载（将文件上传进度显示）_aws toolkit在vue文件

作者：我家自动化 | 2024-02-07 17:42:59

赞

踩

aws toolkit在vue文件

这篇博客已经将这些aws S3的Api集成为了一个js文件，直接引用就可以了，就不需要这么复杂

将AWS S3大文件文件上传相关的API集成为js文件，功能包括 多文件并行上传、文件分片上传、断点续传、文件分片合成、上传暂停、取消上传、文件上传进度条显示_初八不乖的博客-CSDN博客

 效果

流程

AWS S3的官方文档（GetObject - Amazon Simple Storage Service）

 一、上传文件

 1. npm下载 aws-sdk

npm install @aws-sdk/client-s3

2.将aws-sdk集成到vue中

  1. const {
  2.     S3Client,
  3.     CreateMultipartUploadCommand,
  4.     ListMultipartUploadsCommand,
  5.     GetObjectCommand,
  6.     UploadPartCommand,
  7.     CompleteMultipartUploadCommand,
  8.     AbortMultipartUploadCommand
  9. } = require("@aws-sdk/client-s3");
  10. //这里显示的是后面要用到的s3中的方法，具体怎么使用，后面会讲到

3.向后端获上传文件所需要的信息

（存储文件的bucket，存储节点（endPoint也就是存储服务器的ip）、accessKey（访问用户名）、secretKey（访问密码））

这一步也可以直接在前端获取这些信息（如何获取这些信息请参照博客：minio使用案例(Springboot)_子午谷的博客-CSDN博客_minio代理）

我这里是已经创建了bucket了，如果没有创建bucket要先创建

创建方法：
注意：endpoint不要加端口，有默认端口（https，http协议端口不同），如果需要转换端口，可以考虑使用ngnix，如果在这里加了端口，会报错

  1. var s3 = new S3Client({
  2.      endpoint: "https://" + s3Information.endPoint,//存储文件的服务器的地址，无端口
  3.      s3ForcePathStyle: true,
  4.      signatureVersion: 'v4',
  5.      region: 'us-east-1',
  6.      forcePathStyle: true,
  7.      credentials: {
  8.            accessKeyId: "",//访问登录名
  9.            secretAccessKey: "",//访问密码
  10.        }
  11.   });
  12.  var params = {
  13.      Bucket: "examplebucket"//bucket名，任意取
  14.  };
  15.  s3.CreateBucketCommand(params, function(err, data) {
  16.    if (err) console.log(err, err.stack); // 错误
  17.    else     console.log(data);           // 成功
  18.  });

4.建立连接

在每一个文件上传时，都要先与服务器建立连接，并获取唯一的uploadId

  1. //建立连接
  2. //key标识文件的名称
  3. //type为文件的类型
  4. //s3为创建bucket时建立的S3Client
  5.         async createMultipartUpload(bucket, key, s3, type) {// string, string
  6.             const params = {
  7.                 Bucket: bucket,
  8.                 Key: key,
  9.                 ContentType: type
  10.             };
  11.             const res = async () => {
  12.                 try {
  13.                     const data = await s3.send(new CreateMultipartUploadCommand(params));
  14.                     return data;
  15.                 } catch (err) {
  16.                     console.log('建立连接失败：', err.message)
  17.                     return 1;
  18.                 }
  19.  
  20.             }
  21.             return res()
  22.         },

5.选择文件，并将文件切片，分段上传

注意：s3分片上传文件时，只有最后一个分片的文件可以小于5M，其余分片必须大于等于5M，否则会报错（Your proposed upload is smaller than the minimum allowed object size）

阶段所使用的主要方法和步骤

  • 文件分片
  1. const chunkSize = 5 * 1024 * 1024;//定义分片的大小 为5M  采用分片上传时，只能并且只有有最后一个分片的size 小于 指定值（默认5M），不然就会报错
  2. const chunkCount = Math.ceil(this.fileList[i].files.size / chunkSize)//分片数
  3. for (let j = 0; j < chunkCount; j++) {
  4.      let start = j * chunkSize;
  5.      let end = Math.min(this.fileList[i].files.size, start + chunkSize)
  6.      let _chunkFile = this.fileList[i].files.slice(start, end)//分片文件
  7. }
  • 文件分片上传至bucket
  1. //上传一个分片
  2. //f为一个文件分片
  3. //uploadId 为建立连接时返回的唯一id
  4. ///key为文件名
  5. //num为第几个分片
  6. //s3为S3Client
  7.         async uploadPart(f, uploadId, key, bucket, num, s3) {
  8.             const params = {
  9.                 Bucket: bucket,
  10.                 Key: key,
  11.                 PartNumber: num,
  12.                 UploadId: uploadId,
  13.                 Body: f
  14.             };
  15.             const res = async () => {
  16.                 try {
  17.                     const data = await s3.send(new UploadPartCommand(params));
  18.                     return data;
  19.                 } catch (err) {
  20.                     // return alert("There was an error listing your albums: " + err.message);
  21.                     console.log('上传分片错误信息', err.message)
  22.                     return 1;
  23.                 }
  24.  
  25.             }
  26.             return res();
  27.         },

6.文件分片均上传成功后，要对分片进行合并

注意：在分片上传完成，并且合并之后，系统会自动断开连接；如果是发异常，如上传分片失败等，需要手动断开连接

  1. //将分片合并
  2. //parts是一个数组，形式为{ ETag: 分片上传成功后返回的唯一标识, PartNumber: 第几个分片 }
  3.         async completeMultipartUpload(bucket, key, parts, uploadId, s3) {
  4.             const params = {
  5.                 Bucket: bucket,
  6.                 Key: key,
  7.                 MultipartUpload: {
  8.                     Parts: parts
  9.                 },
  10.                 UploadId: uploadId
  11.             };
  12.             const res = async () => {
  13.                 try {
  14.                     const data = await s3.send(new CompleteMultipartUploadCommand(params));
  15.                     return data
  16.                 } catch (err) {
  17.                     console.log("合并分片失败: ", err.message);
  18.                     return 1
  19.                 }
  20.  
  21.             }
  22.             return res()
  23.         },
  1. //取消连接
  2.         async abortMultipartUpload(bucket, key, uploadId, s3) {
  3.             const params = {
  4.                 Bucket: bucket,
  5.                 Key: key,
  6.                 UploadId: uploadId
  7.             };
  8.             const res = async () => {
  9.                 try {
  10.                     const data = await s3.send(new AbortMultipartUploadCommand(params));
  11.                     return data
  12.                 } catch (err) {
  13.                     console.log("取消连接失败: " + err.message);
  14.                     return 1
  15.                 }
  16.  
  17.             }
  18.             return res()
  19.         },

这个时候，文件就上传完成啦

二、下载文件

1.下载插件

我们使用s3的getObject方法获取文件时，获取的是一个readableStream流，所以要使用插件转换成blob文件进行下载

npm i -S binconv

地址：GitHub - nwtgck/binconv-npm: Converters for Blob, Uint8Array, ReadableStream, ArrayBuffer, string in JavaScript/TypeScript

2.下载

  1. //文件下载
  2.         async downLoad(row) {
  3.             let key = row.fid;
  4.             let s3Information = {
  5.                 accessKey: "",
  6.                 bucket: "",
  7.                 endPoint: "",
  8.                 secretKey: ""
  9.             }
  10.             //1、判断在bucket中是否存在该文件
  11.             let param = {
  12.                 fid: key
  13.             }
  14. //getDownloadUrl这个方法是为了像后端获取用户上传的bucket等信息，这些都可以在前端完成
  15.             await getDownloadUrl(param).then(res => {
  16.                 if (res.data.hasOwnProperty("returnCode")) {
  17.                     if (res.data.returnCode == 0) {
  18.                         s3Information = res.data;
  19.                     } else {
  20.                         return this.$message.error(res.data.errMessage);
  21.                     }
  22.                 } else {
  23.                     return this.$message.error("错误请求");
  24.                 }
  25.             }).catch(err => {
  26.                 return this.$message.error("获取文件下载信息过程错误：" + err)
  27.             })
  28.             var s3 = new S3Client({
  29.                 endpoint: "https://" + s3Information.endPoint,
  30.                 s3ForcePathStyle: true,
  31.                 signatureVersion: 'v4',
  32.                 region: 'us-east-1',
  33.                 forcePathStyle: true,
  34.                 credentials: {
  35.                     accessKeyId: s3Information.accessKey,
  36.                     secretAccessKey: s3Information.secretKey,
  37.                 }
  38.             });
  39.             let isExistence = await this.getObject(s3Information.bucket, key, s3, row.name)
  40.             if (isExistence == 1) {
  41.                 return this.$message.error("bucket中不存在该文件");
  42.             }
  43.         },

放上全部代码

1、前端页面

  1. <template>
  2.     <div>
  3.         <!-- 搜索 -->
  4.         <div style="margin-top:20px;">
  5.             <input v-show="false" ref="fileRef" multiple type="file" @change="fileChange">
  6.             <el-button style="float:left" type="primary" icon="el-icon-upload" size="medium" @click="uploadFile">上传媒体文件
  7.             </el-button>
  8.             <el-input size="large" placeholder="请输入内容" v-model="fileName"
  9.                 style="width: 500px;margin-bottom: 20px; margin-left: 50px;">
  10.                 <template slot="prepend">文件名</template>
  11.                 <el-button slot="append" icon="el-icon-search" size="small" @click="search"></el-button>
  12.             </el-input>
  13.  
  14.         </div>
  15.         <!-- 上传文件弹框 -->
  16.         <div>
  17.             <el-dialog title="上传文件" :visible.sync="dialogFormVisible" width="40%" :before-close="fileClose">
  18.                 <div style="width: 100%;height: 500px;overflow: hidden;overflow-y: scroll;">
  19.                     <div v-for="item in fileList" :key="item.name">
  20.                         <div v-if="item.appear == true" style="width:100%;display: table;">
  21.                             <div style="display:table-cell;vertical-align:middle;text-align: center;width: 15%;">
  22.                                 <img src="../../../assets/file.png" style="display:inline-block;" width="50px"
  23.                                     height="60px" />
  24.                             </div>
  25.                             <div style="display:table-cell;width: 70%;">
  26.                                 <div style="font-weight:700;font-size:medium">{{item.files.name}}</div>
  27.                                 <div>
  28.                                     <el-progress :percentage="item.percentage" :color="item.color"></el-progress>
  29.                                 </div>
  30.                                 <div>
  31.                                     <span v-if="item.err == true" style="color:#F56C6C">{{item.meassage}}</span>
  32.                                     <span v-if="item.succ == true" style="color:#67C23A">{{item.meassage}}</span>
  33.                                 </div>
  34.                             </div>
  35.                             <div style="vertical-align:middle;text-align: center;display:table-cell;width: 15%;">
  36.                                 <img @click="stop(item)" v-if="item.show == 0"
  37.                                     style="display:inline-block;cursor: pointer;" src="../../../assets/stop.png"
  38.                                     width="30px" height="30px">
  39.                                 <img @click="continued(item)" v-if="item.show == 1"
  40.                                     style="display:inline-block;cursor: pointer;" src="../../../assets/continue.png"
  41.                                     width="30px" height="30px">
  42.                                 <img @click="deleted(item)" v-if="item.show == 1"
  43.                                     style="display:inline-block;margin-left: 10px;cursor: pointer;"
  44.                                     src="../../../assets/delete.png" width="30px" height="30px">
  45.                                 <img @click="continued(item)" v-if="item.show == 2 || item.show == 4"
  46.                                     style="display:inline-block;cursor: pointer;" src="../../../assets/retry.png"
  47.                                     width="30px" height="30px">
  48.                             </div>
  49.                         </div>
  50.                         <el-divider v-if="item.appear == true" style="margin-top:0%"></el-divider>
  51.                     </div>
  52.                 </div>
  53.             </el-dialog>
  54.         </div>
  55.         <!-- 表格 -->
  56.         <div>
  57.             <el-table :data="tableData" style="width: 100%;font-size: 10px" @sort-change="change"
  58.                 @filter-change="filterChange">
  59.                 <el-table-column prop="fid" label="文件" width="300px">
  60.                     <template slot-scope="scope">
  61.                         <el-link style="font-size: 10px" @click="detail(scope.row)">{{ scope.row.fid }}</el-link>
  62.                     </template>
  63.                 </el-table-column>
  64.                 <el-table-column prop="name" label="文件名" width="350px" :show-overflow-tooltip=true>
  65.                 </el-table-column>
  66.                 <el-table-column prop="size" label="大小" width="150px"></el-table-column>
  67.                 <el-table-column prop="transcoding" label="转码生成文件" width="120px"
  68.                     :filters="[{ text: '否', value: false }, { text: '是', value: true }]" column-key="filterTag">
  69.                     <template slot-scope="scope">
  70.                         <span v-if="scope.row.transcoding === true" style="color:#409EFF">是</span>
  71.                         <span v-if="scope.row.transcoding === false">否</span>
  72.                     </template>
  73.                 </el-table-column>
  74.                 <el-table-column prop="createTime" label="创建时间" sortable="custom" :formatter="tableColumnFormatTime">
  75.                 </el-table-column>
  76.                 <el-table-column prop="expireTime" label="过期时间" :formatter="tableColumnFormatTime"></el-table-column>
  77.                 <el-table-column label="操作" width="150px">
  78.                     <template slot-scope="scope">
  79.                         <el-button type="text" style="color:#E6A23C" @click="detail(scope.row)" size="small">详情
  80.                         </el-button>
  81.                         <el-button type="text" style="color:#409EFF" @click="downLoad(scope.row)" size="small"> 下载
  82.                         </el-button>
  83.                         <el-popconfirm confirm-button-text='删除' cancel-button-text='取消' icon="el-icon-delete"
  84.                             icon-color="red" title="确定删除此媒体文件吗？" @confirm="deleted(scope.row)" style="margin-left:10px">
  85.                             <el-button type="text" style="color:#F56C6C" slot="reference" :disabled="!scope.row.status"
  86.                                 size="small">删除</el-button>
  87.                         </el-popconfirm>
  88.  
  89.                     </template>
  90.                 </el-table-column>
  91.             </el-table>
  92.         </div>
  93.         <!-- 分页 -->
  94.         <div style="margin-top:20px;float: right;">
  95.             <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
  96.                 :current-page="currentPage" :page-sizes="[5, 10, 20, 30]" :page-size='pageSize'
  97.                 layout="total, sizes, prev, pager, next, jumper" :total='total'>
  98.             </el-pagination>
  99.         </div>
  100.         <!-- 详情弹窗 -->
  101.         <div>
  102.             <el-dialog :visible.sync="dialogTableVisible" v-dialogDrag>
  103.                 <template #title>
  104.                     <div>
  105.                         <span style="font-size:20px;line-height:24px;color: #303133;">文件详情</span><br><br>
  106.                         <span style="font-size:xx-small;color:grey">提示：双击弹窗头部，可使弹窗全屏展示</span>
  107.                     </div>
  108.                 </template>
  109.                 <el-descriptions title="" direction="vertical" :column="2" border>
  110.                     <el-descriptions-item label="文件">{{ myDetails.fid }}</el-descriptions-item>
  111.                     <el-descriptions-item label="文件名">{{ myDetails.name }}</el-descriptions-item>
  112.                     <el-descriptions-item label="文件大小">{{ myDetails.size }}</el-descriptions-item>
  113.                     <el-descriptions-item label="文件后缀">{{ myDetails.suffix }}</el-descriptions-item>
  114.  
  115.                     <el-descriptions-item label="创建时间">{{ myDetails.creatAt }}</el-descriptions-item>
  116.                     <el-descriptions-item label="状态">
  117.                         <el-tag type="success" v-if="myDetails.status == 1">上传成功</el-tag>
  118.                         <el-tag type="danger" v-if="myDetails.status == 2">待上传</el-tag>
  119.                         <el-tag type="danger" v-if="myDetails.status == 0">待上传</el-tag>
  120.                         <el-tag type="danger" v-if="myDetails.status == -1">已删除</el-tag>
  121.                         <el-tag type="danger" v-if="myDetails.status == 3">已删除</el-tag>
  122.                         <el-button type="text" style="color:#409EFF;margin-left: 20px;" @click="downLoad(myDetails)"
  123.                             size="small" v-if="myDetails.status == 1"> 下载</el-button>
  124.                     </el-descriptions-item>
  125.                     <el-descriptions-item label="信息流">
  126.                         <span style="white-space:pre-wrap">
  127.                             {{ myDetails.meta }}
  128.                         </span>
  129.  
  130.                     </el-descriptions-item>
  131.                 </el-descriptions>
  132.             </el-dialog>
  133.         </div>
  134.         <!-- <div>
  135.             <button @click="test()">按钮</button>
  136.         </div> -->
  137.     </div>
  138. </template>
  139.  
  140. <script>
  141. import { getMediaFileList, getFileDetails, fileUpload, changeStatus, getDownloadUrl } from '../../../utils/api'
  142. import SparkMD5 from "../../../components/spark-md5.min.js";
  143. import * as binconv from 'binconv';
  144. const chunkSize = 5 * 1024 * 1024;//定义分片的大小 为5M  采用分片上传时，只能并且只有有最后一个分片的size 小于 指定值（默认5M），不然就会报错
  145. const {
  146.     S3Client,
  147.     CreateMultipartUploadCommand,
  148.     ListMultipartUploadsCommand,
  149.     GetObjectCommand,
  150.     UploadPartCommand,
  151.     CompleteMultipartUploadCommand,
  152.     AbortMultipartUploadCommand
  153. } = require("@aws-sdk/client-s3");
  154. export default {
  155.     data() {
  156.         return {
  157.             tableData: [],
  158.             fileName: '',
  159.             order: false,
  160.             currentPage: 1,
  161.             pageSize: 10,
  162.             total: 0,
  163.             dialogTableVisible: false,
  164.             myDetails: {
  165.                 id: "",
  166.                 name: "",
  167.                 size: "",
  168.                 suffix: "",
  169.                 md5: "",
  170.                 meta: "",
  171.                 creatAt: "",
  172.                 status: ''
  173.             },
  174.             isScreen: 0,
  175.             dialogFormVisible: false,
  176.             fileList: [],//文件
  177.             errorFiles: [],//上传失败文件
  178.         }
  179.     },
  180.     watch: {
  181.  
  182.     },
  183.     methods: {
  184.         //文件下载
  185.         async downLoad(row) {
  186.             let key = row.fid;
  187.             let s3Information = {
  188.                 accessKey: "",
  189.                 bucket: "",
  190.                 endPoint: "",
  191.                 secretKey: ""
  192.             }
  193.             //1、判断在bucket中是否存在该文件
  194.             let param = {
  195.                 fid: key
  196.             }
  197.             await getDownloadUrl(param).then(res => {
  198.                 if (res.data.hasOwnProperty("returnCode")) {
  199.                     if (res.data.returnCode == 0) {
  200.                         s3Information = res.data;
  201.                     } else {
  202.                         return this.$message.error(res.data.errMessage);
  203.                     }
  204.                 } else {
  205.                     return this.$message.error("错误请求");
  206.                 }
  207.             }).catch(err => {
  208.                 return this.$message.error("获取文件下载信息过程错误：" + err)
  209.             })
  210.             var s3 = new S3Client({
  211.                 endpoint: "https://" + s3Information.endPoint,
  212.                 s3ForcePathStyle: true,
  213.                 signatureVersion: 'v4',
  214.                 region: 'us-east-1',
  215.                 forcePathStyle: true,
  216.                 credentials: {
  217.                     accessKeyId: s3Information.accessKey,
  218.                     secretAccessKey: s3Information.secretKey,
  219.                 }
  220.             });
  221.             let isExistence = await this.getObject(s3Information.bucket, key, s3, row.name)
  222.             if (isExistence == 1) {
  223.                 return this.$message.error("bucket中不存在该文件");
  224.             }
  225.         },
  226.         //判断在bucket中是否存在该文件
  227.         async getObject(bucket, key, s3, name) {
  228.             const params = {
  229.                 Bucket: bucket,
  230.                 Key: key
  231.             };
  232.             const res = async () => {
  233.                 try {
  234.                     const data = await s3.send(new GetObjectCommand(params));
  235.                     //将readableStream 转换成blob
  236.                     const blob = await binconv.readableStreamToBlob(data.Body);
  237.                     var newBlob = new Blob([blob], { type: data.ContentType });
  238.  
  239.                     var elink = document.createElement('a');
  240.                     elink.download = name;
  241.                     elink.style.display = 'none';
  242.                     const src = URL.createObjectURL(newBlob);
  243.                     elink.href = src;
  244.                     document.body.appendChild(elink);
  245.                     elink.click();
  246.                     document.body.removeChild(elink);
  247.                     URL.revokeObjectURL(src)
  248.                     return 0;
  249.                 } catch (err) {
  250.                     console.log("There was an error listing your albums: " + err.message);
  251.                     return 1;
  252.                 }
  253.             }
  254.             return res()
  255.         },
  256.         //点击选择文件
  257.         uploadFile() {
  258.             this.$refs.fileRef.dispatchEvent(new MouseEvent('click'))
  259.         },
  260.         //文件弹窗关闭
  261.         fileClose(done) {
  262.             for (let i = 0; i < this.fileList.length; i++) {
  263.                 if (this.fileList[i].err == false && this.fileList[i].succ == false) {
  264.                     return this.$message.warning("请等待所有文件处理完成后关闭弹窗");
  265.                 }
  266.             }
  267.             this.fileList = [];
  268.             this.errorFiles = [];
  269.             done();
  270.         },
  271.         //删除还未上传成功文件
  272.         deleted(item) {
  273.             item.appear = false;
  274.         },
  275.         //继续上传
  276.         async continued(item) {
  277.             item.fid = '';
  278.             item.err = false;
  279.             item.succ = false;
  280.             item.message = "";
  281.             item.show = 0;
  282.             item.color = "#409EFF"
  283.             item.s3 = {
  284.                 endPoint: '',
  285.                 accessKeyId: '',
  286.                 secretAccessKey: '',
  287.                 bucket: ''
  288.             };
  289.             this.errorFiles.push(item);
  290.             //for (let i = 0; i < this.errorFiles.length; i++)
  291.             while (this.errorFiles.length != 0) {
  292.                 let errFile = this.errorFiles.pop();
  293.                 //1、获取bucket基本信息
  294.                 let isOk = await this.inputFile(errFile);
  295.                 //2、建立连接
  296.                 if (isOk == 0) {
  297.                     var s3 = new S3Client({
  298.                         endpoint: errFile.s3.endPoint,
  299.                         s3ForcePathStyle: true,
  300.                         signatureVersion: 'v4',
  301.                         region: 'us-east-1',
  302.                         forcePathStyle: true,
  303.                         credentials: {
  304.                             accessKeyId: errFile.s3.accessKeyId,
  305.                             secretAccessKey: errFile.s3.secretAccessKey,
  306.                         }
  307.                     });
  308.                     var isConnect = await this.createMultipartUpload(errFile.s3.bucket, errFile.fid, s3, errFile.files.type)
  309.                     if (isConnect != 1) {
  310.                         //连接成功
  311.                         /**
  312.                          * 3、传送文件
  313.                          * 3.1将文件分片
  314.                          * 3.2分片文件循环上传
  315.                          */
  316.                         const chunkCount = Math.ceil(errFile.files.size / chunkSize)//分片数
  317.  
  318.                         var isUpload = 0;//用来判断分片是否上传成功
  319.                         var sharding = [];//成功分片信息
  320.                         for (let j = 0; j < chunkCount; j++) {
  321.                             let start = j * chunkSize;
  322.                             let end = Math.min(errFile.files.size, start + chunkSize)
  323.                             let _chunkFile = errFile.files.slice(start, end)
  324.                             isUpload = await this.uploadPart(_chunkFile, isConnect.UploadId, errFile.fid, errFile.s3.bucket, j + 1, s3);
  325.                             if (isUpload == 1 || errFile.show == 1) {
  326.                                 isUpload = 1;
  327.                                 //断开连接
  328.                                 await this.abortMultipartUpload(errFile.s3.bucket, errFile.fid, isConnect.UploadId, s3)
  329.                                 break;
  330.                             } else {
  331.                                 //成功
  332.                                 //将分片信息存起来
  333.                                 errFile.percentage = Math.min(99, Math.ceil(errFile.percentage + 100 / chunkCount))
  334.                                 sharding.push({ ETag: isUpload.ETag, PartNumber: j + 1 })
  335.                             }
  336.                         }
  337.                         if (isUpload == 1) {
  338.                             //取消连接
  339.                             //向用户输出文件上传失败，并将前端页面改变
  340.                             errFile.err = true;
  341.                             sharding = [];
  342.                             if (errFile.show == 1) {
  343.                                 errFile.meassage = "暂停";
  344.                             } else {
  345.                                 errFile.show = 2;
  346.                                 errFile.meassage = "上传分片失败";
  347.                             }
  348.                             errFile.color = "#F56C6C";
  349.                             continue;
  350.                         } else {
  351.                             //4、合并分片
  352.                             let isMerge = await this.completeMultipartUpload(errFile.s3.bucket, errFile.fid, sharding, isConnect.UploadId, s3);
  353.                             if (isMerge == 1) {
  354.                                 //失败，将消息返回给页面
  355.                                 errFile.err = true;
  356.                                 errFile.show = 2;
  357.                                 errFile.color = "#F56C6C";
  358.                                 errFile.meassage = "合并分片失败";
  359.                                 continue;
  360.                             } else {
  361.                                 //5、将合并成功信息传给后端 
  362.                                 let success = await this.upLoadIsOk(errFile.fid);
  363.                                 if (success == 0) {
  364.                                     errFile.succ = true;
  365.                                     errFile.meassage = "上传成功";
  366.                                     errFile.show = 3;
  367.                                     errFile.color = "#67C23A";
  368.                                     errFile.percentage = 100;
  369.                                     await this.init();
  370.                                 } else {
  371.                                     errFile.err = true;
  372.                                     errFile.color = "#F56C6C";
  373.                                     errFile.show = 4;
  374.                                     errFile.meassage = success;
  375.                                     continue;
  376.                                 }
  377.                             }
  378.                         }
  379.                     } else {
  380.                         errFile.err = true;
  381.                         errFile.show = 2;
  382.                         errFile.color = "#F56C6C";
  383.                         errFile.meassage = "与bucket建立连接失败";
  384.                         continue;
  385.                     }
  386.                 } else {
  387.                     errFile.err = true;
  388.                     errFile.color = "#F56C6C";
  389.                     errFile.meassage = isOk;
  390.                     errFile.show = 2;
  391.                     continue;
  392.                 }
  393.             }
  394.         },
  395.         //暂停上传
  396.         stop(item) {
  397.             item.show = 1;
  398.         },
  399.         //文件上传
  400.         async fileChange(event) {
  401.             // 将上传文件传到文件列表
  402.             let files = event.target.files;
  403.             this.fileList = [];
  404.             for (let i = 0; i < files.length; i++) {
  405.                 this.fileList.push({
  406.                     appear: true, color: "#409EFF",
  407.                     fid: '', percentage: 0, files: files[i], err: false, succ: false, message: "", show: 0, s3: {
  408.                         endPoint: '',
  409.                         accessKeyId: '',
  410.                         secretAccessKey: '',
  411.                         bucket: ''
  412.                     }
  413.                 })
  414.             }
  415.             this.dialogFormVisible = true;
  416.  
  417.             for (let i = 0; i < this.fileList.length; i++) {
  418.                 //1、获取bucket基本信息
  419.                 let isOk = await this.inputFile(this.fileList[i]);
  420.                 //2、建立连接
  421.                 if (isOk == 0) {
  422.                     var s3 = new S3Client({
  423.                         endpoint: this.fileList[i].s3.endPoint,
  424.                         s3ForcePathStyle: true,
  425.                         signatureVersion: 'v4',
  426.                         region: 'us-east-1',
  427.                         forcePathStyle: true,
  428.                         credentials: {
  429.                             accessKeyId: this.fileList[i].s3.accessKeyId,
  430.                             secretAccessKey: this.fileList[i].s3.secretAccessKey,
  431.                         }
  432.                     });
  433.                     var isConnect = await this.createMultipartUpload(this.fileList[i].s3.bucket, this.fileList[i].fid, s3, this.fileList[i].files.type)
  434.                     if (isConnect != 1) {
  435.                         //连接成功
  436.                         /**
  437.                          * 3、传送文件
  438.                          * 3.1将文件分片
  439.                          * 3.2分片文件循环上传
  440.                          */
  441.                         const chunkCount = Math.ceil(this.fileList[i].files.size / chunkSize)//分片数
  442.  
  443.                         var isUpload = 0;//用来判断分片是否上传成功
  444.                         var sharding = [];//成功分片信息
  445.                         for (let j = 0; j < chunkCount; j++) {
  446.                             let start = j * chunkSize;
  447.                             let end = Math.min(this.fileList[i].files.size, start + chunkSize)
  448.                             let _chunkFile = this.fileList[i].files.slice(start, end)
  449.                             isUpload = await this.uploadPart(_chunkFile, isConnect.UploadId, this.fileList[i].fid, this.fileList[i].s3.bucket, j + 1, s3);
  450.                             if (isUpload == 1 || this.fileList[i].show == 1) {
  451.                                 isUpload = 1;
  452.                                 //断开连接
  453.                                 await this.abortMultipartUpload(this.fileList[i].s3.bucket, this.fileList[i].fid, isConnect.UploadId, s3)
  454.                                 break;
  455.                             } else {
  456.                                 //成功
  457.                                 //将分片信息存起来
  458.                                 this.fileList[i].percentage = Math.min(99, Math.ceil(this.fileList[i].percentage + 100 / chunkCount))
  459.                                 sharding.push({ ETag: isUpload.ETag, PartNumber: j + 1 })
  460.                             }
  461.                         }
  462.                         if (isUpload == 1) {
  463.                             //取消连接
  464.                             //向用户输出文件上传失败，并将前端页面改变
  465.                             this.fileList[i].err = true;
  466.                             sharding = [];
  467.                             if (this.fileList[i].show == 1) {
  468.                                 this.fileList[i].meassage = "暂停";
  469.                             } else {
  470.                                 this.fileList[i].show = 2;
  471.                                 this.fileList[i].meassage = "上传分片失败";
  472.                             }
  473.                             this.fileList[i].color = "#F56C6C";
  474.                             continue;
  475.                         } else {
  476.                             //4、合并分片
  477.                             let isMerge = await this.completeMultipartUpload(this.fileList[i].s3.bucket, this.fileList[i].fid, sharding, isConnect.UploadId, s3);
  478.                             if (isMerge == 1) {
  479.                                 //失败，将消息返回给页面
  480.                                 this.fileList[i].err = true;
  481.                                 this.fileList[i].show = 2;
  482.                                 this.fileList[i].color = "#F56C6C";
  483.                                 this.fileList[i].meassage = "合并分片失败";
  484.                                 continue;
  485.                             } else {
  486.                                 //5、将合并成功信息传给后端 
  487.                                 let success = await this.upLoadIsOk(this.fileList[i].fid);
  488.                                 if (success == 0) {
  489.                                     this.fileList[i].succ = true;
  490.                                     this.fileList[i].meassage = "上传成功";
  491.                                     this.fileList[i].percentage = 100;
  492.                                     this.fileList[i].show = 3;
  493.                                     this.fileList[i].color = "#67C23A";
  494.                                     await this.init();
  495.                                 } else {
  496.                                     this.fileList[i].err = true;
  497.                                     this.fileList[i].show = 4;
  498.                                     this.fileList[i].color = "#F56C6C";
  499.                                     this.fileList[i].meassage = success;
  500.                                     continue;
  501.                                 }
  502.                             }
  503.                         }
  504.                     } else {
  505.                         this.fileList[i].err = true;
  506.                         this.fileList[i].show = 2;
  507.                         this.fileList[i].color = "#F56C6C";
  508.                         this.fileList[i].meassage = "与bucket建立连接失败";
  509.                         continue;
  510.                     }
  511.                 } else {
  512.                     this.fileList[i].err = true;
  513.                     this.fileList[i].meassage = isOk;
  514.                     this.fileList[i].show = 2;
  515.                     this.fileList[i].color = "#F56C6C";
  516.                     continue;
  517.                 }
  518.             }
  519.             this.$refs["fileRef"].value = '';
  520.             return
  521.         },
  522.         //通知后端，文件上传成功
  523.         async upLoadIsOk(fid) {
  524.             let success = 0;
  525.             let param = {
  526.                 fid: fid
  527.             }
  528.             await changeStatus(param).then(res => {
  529.                 if (res.data.hasOwnProperty("returnCode")) {
  530.                     if (res.data.returnCode == 0) {
  531.                         return success = 0;
  532.                     } else {
  533.                         this.$message.error(fid + res.data.errMessage);
  534.                         return success = res.data.errMessage;
  535.                     }
  536.                 } else {
  537.                     this.$message.error(fid + "文件请求错误");
  538.                     return success = "文件请求错误";
  539.                 }
  540.             }).catch(err => {
  541.                 this.$message.error(fid + "上传文件过程失败");
  542.                 return success = "上传文件过程失败";
  543.             })
  544.             return success
  545.         },
  546.         //取消连接
  547.         async abortMultipartUpload(bucket, key, uploadId, s3) {
  548.             const params = {
  549.                 Bucket: bucket,
  550.                 Key: key,
  551.                 UploadId: uploadId
  552.             };
  553.             const res = async () => {
  554.                 try {
  555.                     const data = await s3.send(new AbortMultipartUploadCommand(params));
  556.                     return data
  557.                 } catch (err) {
  558.                     console.log("取消连接失败: " + err.message);
  559.                     return 1
  560.                 }
  561.  
  562.             }
  563.             return res()
  564.         },
  565.         //将分片合并
  566.         async completeMultipartUpload(bucket, key, parts, uploadId, s3) {
  567.             const params = {
  568.                 Bucket: bucket,
  569.                 Key: key,
  570.                 MultipartUpload: {
  571.                     Parts: parts
  572.                 },
  573.                 UploadId: uploadId
  574.             };
  575.             const res = async () => {
  576.                 try {
  577.                     const data = await s3.send(new CompleteMultipartUploadCommand(params));
  578.                     return data
  579.                 } catch (err) {
  580.                     console.log("合并分片失败: ", err.message);
  581.                     return 1
  582.                 }
  583.  
  584.             }
  585.             return res()
  586.         },
  587.         //上传一个分片
  588.         async uploadPart(f, uploadId, key, bucket, num, s3) {
  589.             const params = {
  590.                 Bucket: bucket,
  591.                 Key: key,
  592.                 PartNumber: num,
  593.                 UploadId: uploadId,
  594.                 Body: f
  595.             };
  596.             const res = async () => {
  597.                 try {
  598.                     const data = await s3.send(new UploadPartCommand(params));
  599.                     return data;
  600.                 } catch (err) {
  601.                     // return alert("There was an error listing your albums: " + err.message);
  602.                     console.log('上传分片错误信息', err.message)
  603.                     return 1;
  604.                 }
  605.  
  606.             }
  607.             return res();
  608.         },
  609.         //建立连接
  610.         async createMultipartUpload(bucket, key, s3, type) {// string, string
  611.             const params = {
  612.                 Bucket: bucket,
  613.                 Key: key,
  614.                 ContentType: type
  615.             };
  616.             const res = async () => {
  617.                 try {
  618.                     const data = await s3.send(new CreateMultipartUploadCommand(params));
  619.                     return data;
  620.                 } catch (err) {
  621.                     console.log('建立连接失败：', err.message)
  622.                     return 1;
  623.                 }
  624.  
  625.             }
  626.             return res()
  627.         },
  628.         //上传文件基本信息，获取bucket基本信息
  629.         async inputFile(file) {
  630.             let m = await this.getEasyMd5(file.files)
  631.             let param = {
  632.                 fileName: file.files.name,
  633.                 etag: m.m,
  634.                 size: file.files.size
  635.             }
  636.             let isOk = 0;
  637.             await fileUpload(param).then(res => {
  638.                 if (res.data.hasOwnProperty("returnCode")) {
  639.                     if (res.data.returnCode == 0) {
  640.                         file.s3.endPoint = "https://" + res.data.endPoint;
  641.                         file.s3.bucket = res.data.bucket;
  642.                         file.s3.secretAccessKey = res.data.secretKey;
  643.                         file.s3.accessKeyId = res.data.accessKey;
  644.                         file.fid = res.data.fileId;
  645.                         return isOk = 0;
  646.                     } else {
  647.                         this.$message.error(res.data.errMessage);
  648.                         return isOk = res.data.errMessage;
  649.                     }
  650.                 } else {
  651.                     this.$message.error("请求错误");
  652.                     return isOk = "请求错误";
  653.                 }
  654.             }).catch(err => {
  655.                 this.$message.error("上传文件过程失败");
  656.                 return isOk = "上传过程失败";
  657.             })
  658.             return isOk
  659.         },
  660.         //获取md5值
  661.         async getEasyMd5(file) {
  662.             var blobSlice =
  663.                 File.prototype.slice ||
  664.                 File.prototype.mozSlice ||
  665.                 File.prototype.webkitSlice;
  666.             var chunkSize = 524288; //512KB
  667.             if (file.size > chunkSize * 5) {
  668.                 let l = await new Promise((resolve, reject) => {
  669.                     var chunks = Math.floor(file.size / chunkSize);
  670.                     var step = Math.floor(chunks / 5);
  671.                     var currentChunk = 0;
  672.                     var spark = new SparkMD5.ArrayBuffer();
  673.                     var fileReader = new FileReader();
  674.                     var counter = 0;
  675.                     fileReader.onload = function (e) {
  676.                         if (counter < 5) {
  677.                             spark.append(e.target.result); // Append array buffer
  678.                         }
  679.                         currentChunk += step;
  680.                         var md5_progress = Math.ceil((currentChunk / chunks) * 100);
  681.                         if (counter < 5) {
  682.                             counter += 1;
  683.                             loadNext();
  684.                         } else {
  685.                             if (md5_progress != 100) {
  686.                             }
  687.                             var m = spark.end();
  688.                             let temp = {
  689.                                 m: m
  690.                             }
  691.                             resolve(temp);
  692.                         }
  693.                     };
  694.                     fileReader.onerror = function () {
  695.                     };
  696.  
  697.                     function loadNext() {
  698.                         var start = currentChunk * chunkSize;
  699.                         var end = start + chunkSize >= file.size ? file.size : start + chunkSize;
  700.                         fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
  701.                     }
  702.                     loadNext();
  703.                 })
  704.                 return l;
  705.             } else {
  706.                 let l = await new Promise((resolve, reject) => {
  707.                     const fileReader = new FileReader();
  708.                     var spark = new SparkMD5.ArrayBuffer();
  709.                     fileReader.readAsArrayBuffer(file);
  710.                     fileReader.onload = (e) => {
  711.                         spark.append(e.target.result);
  712.                         var m = spark.end();
  713.                         let temp = {
  714.                             m: m
  715.                         }
  716.                         resolve(temp);
  717.                     };
  718.  
  719.                 })
  720.                 return l;
  721.             }
  722.         },
  723.         //过滤转码后的文件
  724.         filterChange(filterObj) {
  725.             if (filterObj.filterTag.length == 0 || filterObj.filterTag.length == 2) {
  726.                 this.isScreen = 0;
  727.                 this.init();
  728.             } else {
  729.                 if (filterObj.filterTag[0] == true) {
  730.                     this.isScreen = 1;
  731.                     this.init();
  732.                 } else {
  733.                     this.isScreen = 2;
  734.                     this.init();
  735.                 }
  736.  
  737.             }
  738.         },
  739.         //详细信息
  740.         detail(row) {
  741.             let param = {
  742.                 fid: row.fid
  743.             }
  744.             getFileDetails(param).then(res => {
  745.                 if (res.status == 401) {
  746.                     this.$message.error("身份验证过期，请重新登录");
  747.                 }
  748.                 if (res.status == 200 || res.status == 201) {
  749.                     if (res.data.returnCode == 0) {
  750.                         this.myDetails = res.data.file;
  751.                         // if (res.data.file.status == 1) {
  752.                         //     this.myDetails['status'] = '上传成功';
  753.                         // } else if (res.data.file.status == 2) {
  754.                         //     this.myDetails['status'] = '系统待上传';
  755.                         // }
  756.                     } else {
  757.                         return this.$message.error(res.data.errMessage);
  758.                     }
  759.                 }
  760.             }).catch(err => {
  761.                 return this.$message.error("获取详情过程失败");
  762.             })
  763.             this.dialogTableVisible = true;
  764.         },
  765.         //查找
  766.         search() {
  767.             this.init();
  768.         },
  769.         //改变当前页数
  770.         handleSizeChange(val) {
  771.             this.pageSize = val;
  772.             this.currentPage = 1;
  773.             this.init();
  774.         },
  775.         //改变当前页
  776.         handleCurrentChange(val) {
  777.             this.currentPage = val;
  778.             this.init();
  779.         },
  780.         //初始化
  781.         async init() {
  782.             let param = {
  783.                 pageNum: this.currentPage,
  784.                 pageSize: this.pageSize,
  785.                 order: 'create_time',
  786.                 asc: this.order,
  787.                 status: 1
  788.             }
  789.             if (this.fileName != null && this.fileName != '') {
  790.                 param['fileName'] = this.fileName;
  791.             }
  792.             if (this.isScreen == 1) {
  793.                 param['transcoding'] = true;
  794.             } else if (this.isScreen == 2) {
  795.                 param['transcoding'] = false;
  796.             }
  797.             await getMediaFileList(param).then(res => {
  798.                 if (res.status == 401) {
  799.                     this.$message.error("身份验证过期，请重新登录");
  800.                 }
  801.                 if (res.status == 200 || res.status == 201) {
  802.                     if (res.data.returnCode == 0) {
  803.                         this.tableData = res.data.files;
  804.                         this.total = res.data.total;
  805.                     } else {
  806.                         return this.$message.error(res.data.errMessage);
  807.                     }
  808.                 }
  809.             })
  810.         },
  811.         //改变排序
  812.         change(column) {
  813.             if (column.order == "descending") {
  814.                 this.order = false;
  815.                 this.init();
  816.             } else {
  817.                 this.order = true;
  818.                 this.init();
  819.             }
  820.         },
  821.         //格式化时间时区
  822.         tableColumnFormatTime(row, column, cellValue, index) {
  823.             // yyyy-MM-dd hh:mm:ss
  824.             let date = new Date(cellValue);
  825.             return date.Format("yyyy-MM-dd hh:mm:ss")
  826.         }
  827.     },
  828.     created() {
  829.         this.init();
  830.     }
  831. }
  832. </script>
  833.  
  834. <style lang="less" scoped>
  835. /deep/.el-divider--horizontal {
  836.     margin: 0 0;
  837. }
  838.  
  839. .on {
  840.     display: inline-block;
  841.     line-height: 1;
  842.     white-space: nowrap;
  843.     cursor: pointer;
  844.     background: #FFF;
  845.     border: 1px solid #DCDFE6;
  846.     color: #606266;
  847.     -webkit-appearance: none;
  848.     text-align: center;
  849.     box-sizing: border-box;
  850.     outline: 0;
  851.     margin: 0;
  852.     transition: .1s;
  853.     font-weight: 500;
  854.     padding: 12px 20px;
  855.     font-size: 14px;
  856.     border-radius: 4px;
  857.     color: #FFF;
  858.     background-color: #409EFF;
  859.     border-color: #409EFF;
  860. }
  861.  
  862. .active {
  863.     color: #409EFF;
  864.     cursor: pointer;
  865. }
  866.  
  867. .out {
  868.     color: #606266;
  869. }
  870.  
  871. .dia {
  872.     /deep/.el-dialog__body {
  873.         align-items: center;
  874.         flex-direction: column;
  875.         display: flex;
  876.     }
  877. }
  878.  
  879. /deep/.el-link.el-link--default {
  880.     color: #6aaef1;
  881. }
  882. </style>

补充

有很多网友想要与后端相关的文档，所以补充一下

这个是封装的请求

  1. //获取媒体文件列表
  2. export function getMediaFileList(params) {
  3.     return http.get('/mpms/files', params);
  4. }
  5.  
  6. //获取媒体文件详情
  7. export function getFileDetails(params) {
  8.     return http.get('/mpms/file', params);
  9. }
  10.  
  11. //上传文件时获取bucket信息
  12. export function fileUpload(params) {
  13.     return http.post('/mpms/file',params);
  14. }
  15.  
  16. //上传文件并校验成功后，将文件状态改变
  17. export function changeStatus(params) {
  18.     return http.put('/mpms/file', params);
  19. }
  20.  
  21. //获取文件下载地址
  22. export function getDownloadUrl(params) {
  23.     return http.get('/mpms/file/download', params);
  24. }

这是后端相关的接口文档

仅列出与文件上传相关的fileUpload、changeStatus

fileUpload

 changeStatus

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/66622
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号