<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>聯(lián)系信息</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"
? ? ? ? ? ? ? ? ? ? >上傳到服務(wù)器</el-button
? ? ? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? ? <el-button
? ? ? ? ? ? ? ? ? ? style="margin-left: 10px"
? ? ? ? ? ? ? ? ? ? size="small"
? ? ? ? ? ? ? ? ? ? type="success"
? ? ? ? ? ? ? ? ? ? @click="resumeUpload"
? ? ? ? ? ? ? ? ? ? >繼續(xù)</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>捐贈(zèng)支持</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); // 用來緩存當(dāng)前切片內(nèi)容
const uploadId = ref("");
const uploadStatus = ref(null); // 進(jìn)度條上傳狀態(tài)
const percentage = ref(0); // 進(jìn)度條百分比
const uploadName = ref("");
function goTarget(url) {
? window.open(url, "__blank");
}
// 點(diǎn)擊上傳至服務(wù)器
async function submitForm(file) {
? const res = await getSts({});
? console.log(res);
? client.value = await new OSS({
? ? region: "oss-cn-*******", //根據(jù)那你的Bucket地點(diǎn)來填寫
? ? 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); // 暫停時(shí)清除時(shí)間監(jiān)聽
? let result = client.value.cancel();
? console.log(result, "---------暫停上傳-----------");
}
// 切片上傳
async function multipartUpload() {
? if (!file.value) {
? ? ElMessage.error("請(qǐng)選擇文件");
? ? 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）的形式涎拉，實(shí)現(xiàn)將文件上傳至當(dāng)前Bucket或Bucket下的指定目錄。
? ? let result = await client.value.multipartUpload(
? ? ? file.value.name,
? ? ? file.value,
? ? ? {
? ? ? ? headers: {
? ? ? ? ? "Content-Disposition": "inline",
? ? ? ? ? "Content-Type": file.value.type, //注意：根據(jù)圖片或者文件的后綴來設(shè)置斩个，我試驗(yàn)用的‘.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-----------"
? ? ? ? ? );
? ? ? ? ? // 斷點(diǎn)記錄點(diǎn)。瀏覽器重啟后無法直接繼續(xù)上傳率翅，您需要手動(dòng)觸發(fā)上傳操作。
? ? ? ? },
? ? ? ? parallel: 4,
? ? ? ? meta: { year: 2023, people: "dev" },
? ? ? ? mime: file.value.type,
? ? ? }
? ? );
? ? console.log(result, percentage.value, "result= 切片上傳完畢=");
? } catch (e) {
? ? window.addEventListener("online", resumeUpload); // 該監(jiān)聽放在斷網(wǎng)的異常處理
? ? // 捕獲超時(shí)異常袖迎。
? ? if (e.code === "ConnectionTimeoutError") {
? ? ? // 請(qǐng)求超時(shí)異常處理
? ? ? this.uploadStatus = "exception";
? ? ? console.log("TimeoutError");
? ? ? // do ConnectionTimeoutError operation
? ? }
? ? // console.log(e)
? }
}
// 恢復(fù)上傳冕臭。
async function resumeUpload() {
? window.removeEventListener("online", resumeUpload);
? if (!tempCheckpoint.value) {
? ? ElMessage.error("請(qǐng)先上傳");
? ? 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, //注意：根據(jù)圖片或者文件的后綴來設(shè)置，我試驗(yàn)用的‘.png’的圖片燕锥，具體為什么下文解釋
? ? ? ? },
? ? ? ? progress: (p, checkpoint) => {
? ? ? ? ? percentage.value = p * 100;
? ? ? ? ? console.log(
? ? ? ? ? ? p,
? ? ? ? ? ? checkpoint.value,
? ? ? ? ? ? "checkpoint----恢復(fù)上傳的切片信息-------"
? ? ? ? ? );
? ? ? ? ? tempCheckpoint.value = checkpoint;
? ? ? ? },
? ? ? ? checkpoint:tempCheckpoint.value,
? ? ? ? meta: { year: 2020, people: "dev" },
? ? ? ? mime: file.value.type,
? ? ? }
? ? );
? ? console.log(result, "result-=-=-恢復(fù)上傳完畢");
? } catch (e) {
? ? console.log(e, "e-=-=-");
? }
}
// 選擇文件發(fā)生改變
function handleChange(files, fileList) {
? console.log(files, fileList);
? fileList.value = fileList.filter((row) => row.uid == files.uid);
? file.value = files.raw;
? // 文件改變時(shí)上傳
? // this.submitForm(file)
}
function handleRemove(file, fileList) {
? this.percentage = 0; //進(jìn)度條置空
? 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>
