最近公司在做项目，是一个视频文件上传的功能，前后端讨论技术方案后，采用阿里云提供的功能去实现，下面主要是前端的代码，
html
<input type="file" @change="uploadVideo">
<!--进度条-->
<el-progress :percentage="percentage"></el-progress>
uploadVideo(e){
//拿到上传文件的允许条件，具体问后端
this.axios.get("/sts/token").then(res => {
let OSS = require("ali-oss");
let client = new OSS({
// yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
region: "oss-cn-beijing",
// 从STS服务获取的临时访问凭证。临时访问凭证包括临时访问密钥（AccessKeyId和AccessKeySecret）和安全令牌（SecurityToken）。
//accessKeyId,accessKeySecret,stsToken这三个值是后端返给你的
accessKeyId: res.Credentials.AccessKeyId,
accessKeySecret: res.Credentials.AccessKeySecret,
stsToken: res.Credentials.SecurityToken,
// 填写Bucket名称。
bucket: '后端小哥会告诉你'
});
// let client = new OSS(ossConfig);
let tempCheckpoint;
async function multipartUpload() {
try {
// 填写Object完整路径和本地文件的完整路径。Object完整路径中不能包含Bucket名称。
// 您可以通过自定义文件名（例如exampleobject.txt）或目录（例如mytestdoc/exampleobject.txt）的形式，实现将文件上传到当前Bucket或Bucket中的指定目录。
// 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
let result = await client.multipartUpload(
`在后端存储的位置/${res.file_name}`,
e.target.files[0],
{
progress: function(p, checkpoint) {
//p是返回的上传进度
console.log(p);
that.percentage = parseInt(p * 100);
if (p == 1) {
//p等于1时，表示上传已经完成，给后端发一次请求，告诉这个文件已经上传完成了
that.axios.post("/sts/token", {
file_name: res.file_name,
upload_status: "already_upload" //这个字段前后端协商
});
}
// 断点记录点。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
tempCheckpoint = checkpoint;
}
}
);
} catch (e) {
console.log(e);
}
}
multipartUpload();
});
}
前端代码已经写完了，这样写了，执行的时候，会出现下图的问题
解决方案是在阿里云的设置里加一个header
登录OSS管理控制台
单击Bucket列表，之后单击目标Bucket名称。
单击权限管理>跨域设置，在跨域设置区域单击设置。
单击创建规则，在设定跨域规则面板设置跨域访问参数。
暴露 Headers：设置为ETag、x-oss-request-id和x-oss-version-id。
设置完就搞定了。
