vue 3调用服务端sts签名做web端直传(直接复制代码就能用
<template>
<div class="app-container home">
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="12" :lg="8">
<el-card class="update-log">
<template v-slot:header>
<div class="clearfix">
<span>联系信息</span>
</div>
</template>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="8">
<el-card class="update-log">
<template v-slot:header>
<div class="clearfix">
<span>更新3日志</span>
</div>
<div>
<div class="dashboard-editor-container">
<div class="dashboard-editor-container">
<el-upload
class="upload-demo"
action=""
ref="upload"
:file-list="fileList"
:limit="1"
:on-change="handleChange"
:on-remove="handleRemove"
:auto-upload="false"
accept=".zip,.rar"
>
<el-button @slot="trigger" size="small" type="primary"
>选取文件</el-button
>
</el-upload>
<el-button
style="margin-left: 10px"
size="small"
type="success"
@click="submitForm"
>上传到服务器</el-button
>
<el-button
style="margin-left: 10px"
size="small"
type="success"
@click="resumeUpload"
>继续</el-button
>
<el-button
style="margin-left: 10px"
size="small"
type="success"
@click="stopUplosd"
>暂停</el-button
>
<el-button
style="margin-left: 10px"
size="small"
type="success"
@click="abortMultipartUpload"
>清除切片</el-button
>
<el-progress
:percentage="percentage"
:status="uploadStatus"
></el-progress>
</div>
</div>
</div>
</template>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="8">
<el-card class="update-log">
<template v-slot:header>
<div class="clearfix">
<span>捐赠支持</span>
</div>
</template>
<div class="body"></div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup name="Index">
import OSS from "ali-oss";
import { getSts } from "@/api/tool/upload";
// let OSS = require("ali-oss"); // 引入ali-oss插件
import { ElMessage } from "element-plus";
const client = ref();
const version = ref("3.3.0");
const fileList = ref([]);
const file = ref(null);
const tempCheckpoint = ref(null); // 用来缓存当前切片内容
const uploadId = ref("");
const uploadStatus = ref(null); // 进度条上传状态
const percentage = ref(0); // 进度条百分比
const uploadName = ref("");
function goTarget(url) {
window.open(url, "__blank");
}
// 点击上传至服务器
async function submitForm(file) {
const res = await getSts({});
console.log(res);
client.value = await new OSS({
region: "oss-cn-*******", //根据那你的Bucket地点来填写
accessKeyId: res.data.accessKeyId,
accessKeySecret: res.data.accessKeySecret,
bucket: "********************", //bucket名字
stsToken: res.data.securityToken,
});
multipartUpload();
}
// 取消分片上传事件
async function abortMultipartUpload() {
window.removeEventListener("online", resumeUpload);
const name = uploadName.value; // Object所在Bucket的完整路径。
const uploadId = uploadId.value; // 分片上传uploadId。
const result = await client.abortMultipartUpload(name, uploadId);
console.log(result, "=======清除切片====");
}
// 暂停分片上传。
function stopUplosd() {
window.removeEventListener("online", resumeUpload); // 暂停时清除时间监听
let result = client.value.cancel();
console.log(result, "---------暂停上传-----------");
}
// 切片上传
async function multipartUpload() {
if (!file.value) {
ElMessage.error("请选择文件");
return;
}
uploadStatus.value = null;
// console.log("this.uploadStatus",this.file, this.uploadStatus);
console.log(client.value);
percentage.value = 0;
try {
//object-name可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
let result = await client.value.multipartUpload(
file.value.name,
file.value,
{
headers: {
"Content-Disposition": "inline",
"Content-Type": file.value.type, //注意：根据图片或者文件的后缀来设置，我试验用的‘.png’的图片，具体为什么下文解释
},
progress: (p, checkpoint) => {
tempCheckpoint.value = checkpoint;
uploadId.value = checkpoint.uploadId;
uploadName.value = checkpoint.name;
percentage.value = p * 100;
console.log(
p,
checkpoint.value,
percentage.value,
"---------uploadId-----------"
);
// 断点记录点。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
},
parallel: 4,
meta: { year: 2023, people: "dev" },
mime: file.value.type,
}
);
console.log(result, percentage.value, "result= 切片上传完毕=");
} catch (e) {
window.addEventListener("online", resumeUpload); // 该监听放在断网的异常处理
// 捕获超时异常。
if (e.code === "ConnectionTimeoutError") {
// 请求超时异常处理
this.uploadStatus = "exception";
console.log("TimeoutError");
// do ConnectionTimeoutError operation
}
// console.log(e)
}
}
// 恢复上传。
async function resumeUpload() {
window.removeEventListener("online", resumeUpload);
if (!tempCheckpoint.value) {
ElMessage.error("请先上传");
return;
}
uploadStatus.value = null;
try {
let result = await client.value.multipartUpload(
file.value.name,
file.value,
{
headers: {
"Content-Disposition": "inline",
"Content-Type": file.value.type, //注意：根据图片或者文件的后缀来设置，我试验用的‘.png’的图片，具体为什么下文解释
},
progress: (p, checkpoint) => {
percentage.value = p * 100;
console.log(
p,
checkpoint.value,
"checkpoint----恢复上传的切片信息-------"
);
tempCheckpoint.value = checkpoint;
},
checkpoint:tempCheckpoint.value,
meta: { year: 2020, people: "dev" },
mime: file.value.type,
}
);
console.log(result, "result-=-=-恢复上传完毕");
} catch (e) {
console.log(e, "e-=-=-");
}
}
// 选择文件发生改变
function handleChange(files, fileList) {
console.log(files, fileList);
fileList.value = fileList.filter((row) => row.uid == files.uid);
file.value = files.raw;
// 文件改变时上传
// this.submitForm(file)
}
function handleRemove(file, fileList) {
this.percentage = 0; //进度条置空
this.fileList = [];
}
</script>
<style scoped lang="scss">
.home {
.col-item {
margin-bottom: 20px;
}
ul {
padding: 0;
margin: 0;
}
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #676a6c;
overflow-x: hidden;
ul {
list-style-type: none;
}
h4 {
margin-top: 0px;
}
h2 {
margin-top: 10px;
font-size: 26px;
font-weight: 100;
}
p {
margin-top: 10px;
b {
font-weight: 700;
}
}
.update-log {
ol {
display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 40px;
}
}
}
</style>
