93 lines
2.3 KiB
Vue
93 lines
2.3 KiB
Vue
<template>
|
||
<el-upload
|
||
class="avatar-uploader"
|
||
v-model="url"
|
||
action=""
|
||
:auto-upload="false"
|
||
:http-request="onFileSubmit"
|
||
:onChange="onFileChange"
|
||
:show-file-list="false"
|
||
>
|
||
<video
|
||
v-if="url"
|
||
:src="url"
|
||
class="avatar"
|
||
controls="controls"
|
||
style="width: 200px; height: 148px"
|
||
>
|
||
您的浏览器不支持视频播放
|
||
</video>
|
||
<i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
|
||
<el-progress
|
||
type="circle"
|
||
v-if="percentage > 0 && percentage <= 100"
|
||
:percentage="percentage"
|
||
color="#efefef"
|
||
></el-progress>
|
||
</el-upload>
|
||
</template>
|
||
<script>
|
||
import OSS from "@/utils/oss-upload.js";
|
||
import { $getCredentials } from "@/api/oss.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
url: "",
|
||
ossClient: undefined,
|
||
percentage: 0,
|
||
};
|
||
},
|
||
mounted() {
|
||
this.initOssClient();
|
||
},
|
||
methods: {
|
||
async onFileChange(data) {
|
||
console.log(data);
|
||
const date = new Date();
|
||
const start =
|
||
date.getFullYear() +
|
||
"" +
|
||
(date.getMonth() * 1 + 1) +
|
||
"" +
|
||
date.getDate();
|
||
const houzhui = "." + data.name.substr(data.name.lastIndexOf(".") + 1);
|
||
const name = start + "/" + getUUID() + houzhui;
|
||
const fileRes = await this.ossClient.partUpload(name, data.raw, (p) => {
|
||
this.percentage = Math.floor(p * 100);
|
||
// 这里可以根据进度做相应的处理，例如更新UI等
|
||
});
|
||
console.log(fileRes);
|
||
if (!fileRes) {
|
||
this.percentage = 0;
|
||
this.$notify({
|
||
title: "失败",
|
||
message: `上传阿里云失败`,
|
||
type: "error",
|
||
});
|
||
return;
|
||
}
|
||
if (fileRes.name == "cancel") {
|
||
return;
|
||
}
|
||
this.url = fileRes.replace(
|
||
"https://sy-duanju.oss-cn-chengdu.aliyuncs.com/",
|
||
"https://short-video.hnsiyao.cn/"
|
||
);
|
||
},
|
||
onFileSubmit(data) {
|
||
console.log("data");
|
||
console.log(data);
|
||
},
|
||
async initOssClient() {
|
||
console.log("initOssClient");
|
||
const { data } = await $getCredentials();
|
||
if (data.code == 0) {
|
||
const res = data.data;
|
||
console.log(res);
|
||
this.ossClient = new OSS({ ...res, stsToken: res.securityToken });
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|