关于vue使用阿里云OSS分片上传(含进度条)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
需要上传文件到阿里云OSS考虑到文件较大采用分片上传(demo)
1. 使用 npm 安装SDK开发包
npm install ali-oss
2.在 vue 中直接使用
代码段可直接使用 具体功能查看 官方文档
<template>
<div>
<el-upload
ref="upload"
drag
action
:auto-upload="false"
multiple
:on-change="uploadFile"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>
<el-progress
style="margin: 20px 0"
:text-inside="true"
:stroke-width="26"
:percentage="progress"
></el-progress>
</div>
</template>
data() {
return {
progress: 0,
uploadId: "",
file_name: "",
};
},
methods: {
async uploadFile(files) {
let that = this;
let file = files.raw;
let OSS = require("ali-oss");
// 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。
let res = await GetSts();//向后端发请求获取信息
let client = new OSS({
bucket: res.data.body.bucket_name,
region: res.data.body.region,
accessKeyId: res.data.body.AccessKeyId,
accessKeySecret: res.data.body.AccessKeySecret,
stsToken: res.data.body.SecurityToken,
expiration: res.data.body.Expiration,
});
const options = {
// 获取分片上传进度、断点和返回值。
progress: (p, cpt, res) => {
that.uploadId = cpt.uploadId;//取消时需要的参数
that.progress = Number((p * 100).toFixed(0));//进度条
},
// 设置并发上传的分片数量。
parallel: 9999,
// 设置分片大小。默认值为1 MB,最小值为100 KB。
partSize: 1024 * 1024,
// headers,
// 自定义元数据,通过HeadObject接口可以获取Object的元数据。
meta: { year: 2020, people: "test" },
callback: {
// 设置回调请求的服务器地址,且要求必须为公网地址。
url: res.data.body.callback.url,
// 设置发起回调时请求body的值。
body: res.data.body.callback.body,
// 设置发起回调请求的Content-Type。
contentType: res.data.body.callback.contentType,
},
};
//开始分片上传。
async function multipartUpload() {
try {
//object-name可以自定义为文件名(例如file.txt)或目录(例如abc/test/file.txt)的形式,实现将文件上传至当前Bucket或Bucket下的指定目录。
let result = await client.multipartUpload(
res.data.body.folder + "/" + file.name,
file,
{
...options,
}
);
console.log(result);
let head = await client.head(file.name);
console.log(head);
} catch (e) {
// 捕获超时异常。
console.log(e);
}
}
multipartUpload(); //调用函数
},
},
重要 通常在文件大于100 MB的情况下,建议采用分片上传的方法,通过断点续传和重试,提高上传成功率。如果在文件小于100 MB的情况下使用分片上传,且partSize设置不合理的情况下,可能会出现无法完整显示上传进度的情况。对于小于100 MB的文件,建议使用简单上传的方式。
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)