vue+element+oss实现前端分片上传和断点续传代码示例

本篇文章小编给大家分享一下vue+element+oss实现前端分片上传和断点续传代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

纯前端实现：切片上传断点续传。断点续传需要在切上上传的基础上实现

前端之前上传OSS，无需后端提供接口。先上完整代码，直接复制，将new OSS里的参数修改成自己公司OSS相关信息后可用，如遇问题，请继续往下看。

oss官方文档

https://help.aliyun.com/document_detail/111268.html?spm=a2c4g.11186623.6.1111.5a583a07LknRUO

代码允许所需环境：vue + element + ali-oss

安装ali-oss： cnpm install ali-oss

代码实现

如果相关依赖已经安装完毕，但是上述代码操作时仍有报错，请检查以下问题

 const client = new OSS({
 region: 'oss-cn-shanghai',//根据那你的Bucket地点来填写
 accessKeyId: 'LT******XY',//自己账户的accessKeyId
 accessKeySecret: 'uu*********GiS',//自己账户的accessKeySecret
 bucket: 'a******io',//bucket名字
 });

上述信息放在前端会存在安全问题，如在项目中使用尽量由后端接口提供。或使用STS临时授权。demo中没有，请自行探索。

https://www.alibabacloud.com/help/zh/doc-detail/100624.htm?spm=a2c63.p38356.879954.5.7a234d04IQpf5I#concept-xzh-nzk-2gb

配置项中信息可以问后端或者运维，bucket的名字必须是你OSS上存在的且你有权限访问的，不然会一直报Pleasr create a busket first或者一直报跨域

当遇到跨域时，或者遇到报报错信息中有etag时，请检查OSS配置，然后找有OSS服务器权限人员进行配置：

window.addEventListener('online', this.resumeUpload)用于监听网络状态（断网状态和连网状态），实现断网后恢复网络自动上传就必须设置监听。

window.removeEventListener('online', this.resumeUpload)取消监听。如果不设置取消监听，联网状态下会一直处于进行上传，因为一直满足监听条件`

headers: {
   'Content-Disposition': 'inline',
   'Content-Type': this.file.type //注意：根据图片或者文件的后缀来设置，我取得是文件的type，具体为什么下文解释
   },

'Content-Type': this.file.type`的作用：加了在文件上传完毕后，访问文件链接时可以直接查看，否则会直接下载。

文件上传完毕后查看，可以去resule.res.requestUrls中去取，但是注意要去点地址后面的?uploadId=******

上述代码只是demo，代码以实现功能为主，并不严谨，请自行完善。