增加阿里云切片上传，版本管理文件上传切换为阿里云上传，增加上传进度条
This commit is contained in:
parent
050b13e2eb
commit
5f8cecfa90
|
|
@ -24,6 +24,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@riophae/vue-treeselect": "^0.4.0",
|
||||
"ali-oss": "^6.21.0",
|
||||
"axios": "^0.21.1",
|
||||
"clipboard": "2.0.4",
|
||||
"codemirror": "^5.49.2",
|
||||
|
|
|
|||
|
|
@ -35,4 +35,18 @@ export function $uploadVersionFile(file, par) {
|
|||
data
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 修改当前选中 版本
|
||||
* @returns
|
||||
*/
|
||||
export function $getCredentials(data) {
|
||||
return request({
|
||||
url: 'api/qiNiuContent/getCredentials',
|
||||
method: "get",
|
||||
data: {
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...data
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,103 @@
|
|||
import OSS from "ali-oss";
|
||||
import { $getCredentials } from "@/api/version";
|
||||
|
||||
const $headers = {
|
||||
"Access-Control-Allow-Origin": "*"
|
||||
};
|
||||
const $config = {
|
||||
region: "oss-cn-beijing",
|
||||
accessKeyId: "",
|
||||
accessKeySecret: "",
|
||||
bucket: "cashier-oss"
|
||||
}
|
||||
async function uploadAndDownloadFile(name, file, headers) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
ossClient.put(name, file, { ...$headers, ...headers }).then((res) => {
|
||||
console.log(res);
|
||||
resolve(res);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
class ossClient {
|
||||
constructor(config) {
|
||||
this.ossClient = new OSS({
|
||||
...$config, ...config, refreshSTSToken: async () => {
|
||||
// 向您搭建的STS服务获取临时访问凭证。
|
||||
const res = await $getCredentials()
|
||||
return {
|
||||
accessKeyId: res.accessKeyId, // 自己账户的accessKeyId或临时秘钥
|
||||
accessKeySecret: res.accessKeySecret, // 自己账户的accessKeySecret或临时秘钥
|
||||
stsToken: res.securityToken, // 从STS服务获取的安全令牌（SecurityToken）。
|
||||
}
|
||||
},
|
||||
// 刷新临时访问凭证的时间间隔，单位为毫秒。
|
||||
refreshSTSTokenInterval: 3600 * 1000
|
||||
});
|
||||
}
|
||||
async upload(name, file, progressCallback) {
|
||||
try {
|
||||
let options = {
|
||||
// 获取分片上传进度、断点和返回值。
|
||||
progress: progressCallback,
|
||||
headers:$headers
|
||||
}
|
||||
const {
|
||||
res: resp
|
||||
} = await this.ossClient.put(name, file,options).catch(error => {
|
||||
reject(error);
|
||||
})
|
||||
return resp.requestUrls
|
||||
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
reject(error);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 分片上传
|
||||
* @param {Object} client oss客户端
|
||||
* @param {Object} file 上传的文件
|
||||
* @param {Object} dir 上传oss的文件夹
|
||||
* @param {Object} progressCallback 分片进度回调
|
||||
*/
|
||||
async partUpload(name, file, progressCallback) {
|
||||
try {
|
||||
let options = {
|
||||
// 获取分片上传进度、断点和返回值。
|
||||
progress: progressCallback,
|
||||
|
||||
// 设置并发上传的分片数量。
|
||||
parallel: 8,
|
||||
// 设置分片大小。默认值为1 MB，最小值为100 KB。
|
||||
partSize: 100 * 1024,
|
||||
mime: file.type
|
||||
}
|
||||
const {
|
||||
res: resp
|
||||
} = await this.ossClient.multipartUpload(name ? name : file.name, file, options)
|
||||
// return resp.requestUrls
|
||||
console.log(resp)
|
||||
return `${resp.requestUrls[0]}`.split('?')[0]
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 结束上传并删除碎片
|
||||
* @param {Object} client
|
||||
* @param {Object} uploadId
|
||||
* @param {Object} name
|
||||
*/
|
||||
abortUpload(uploadId, name) {
|
||||
this.client.abortMultipartUpload(name, uploadId)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
export default ossClient;
|
||||
|
|
@ -4,11 +4,14 @@
|
|||
width="500px"
|
||||
:visible.sync="dialogVisible"
|
||||
@close="diaClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div class="progress" v-if="loading">
|
||||
<el-progress type="circle" :percentage="progress"></el-progress>
|
||||
</div>
|
||||
<el-form
|
||||
v-loading="loading"
|
||||
:element-loading-text="loadingText"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
|
|
@ -40,26 +43,36 @@
|
|||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="更新提示内容" prop="message">
|
||||
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" v-model="form.message"></el-input>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 6 }"
|
||||
v-model="form.message"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="版本文件">
|
||||
<uploadFile ref="uploadFile" @success="changeHasUpload" :limit="1" @remove="uploadRemove" />
|
||||
<uploadFile
|
||||
ref="uploadFile"
|
||||
@success="changeHasUpload"
|
||||
:limit="1"
|
||||
@remove="uploadRemove"
|
||||
/>
|
||||
<div class="tips"></div>
|
||||
</el-form-item>
|
||||
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmitHandle">确 定</el-button>
|
||||
</div>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmitHandle">确 定</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadFile from "./upload-file";
|
||||
import { $uploadVersionFile, $version } from "@/api/version";
|
||||
import { cancelToken, clearAllToken } from '@/utils/globalCancelToken.js'
|
||||
|
||||
import { $uploadVersionFile, $version, $getCredentials } from "@/api/version";
|
||||
import { cancelToken, clearAllToken } from "@/utils/globalCancelToken.js";
|
||||
import OSS from "@/utils/oss-upload.js";
|
||||
const form = {
|
||||
source: "PC",
|
||||
version: "",
|
||||
|
|
@ -73,8 +86,10 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
progress: 0,
|
||||
ossClient: undefined,
|
||||
loading: false,
|
||||
loadingText:'',
|
||||
loadingText: "",
|
||||
sources: [
|
||||
{ label: "PC", value: "PC" },
|
||||
{ label: "APP", value: "APP" },
|
||||
|
|
@ -92,26 +107,33 @@ export default {
|
|||
},
|
||||
form: { ...form },
|
||||
//文件是否已经上传过
|
||||
hasUpload:true
|
||||
hasUpload: true,
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
mounted() {
|
||||
this.getCredentials();
|
||||
},
|
||||
methods: {
|
||||
changeHasUpload(){
|
||||
this.hasUpload=false
|
||||
async getCredentials() {
|
||||
const res = await $getCredentials();
|
||||
this.ossClient = new OSS({ ...res, stsToken: res.securityToken });
|
||||
console.log(this.ossClient);
|
||||
},
|
||||
changeHasUpload() {
|
||||
this.hasUpload = false;
|
||||
},
|
||||
restForm() {
|
||||
console.log("restForm");
|
||||
console.log(form);
|
||||
this.form = { ...form };
|
||||
this.loadingText=''
|
||||
this.loading=false
|
||||
this.loadingText = "";
|
||||
this.loading = false;
|
||||
this.progress = 0;
|
||||
},
|
||||
diaClose() {
|
||||
this.$refs.uploadFile.clearFiles();
|
||||
this.restForm();
|
||||
cancelToken()
|
||||
|
||||
cancelToken();
|
||||
},
|
||||
uploadSuccess(res) {
|
||||
this.form.img = res[0];
|
||||
|
|
@ -127,37 +149,64 @@ export default {
|
|||
if (valid) {
|
||||
try {
|
||||
const { version } = this.form;
|
||||
let fileRes=''
|
||||
let fileRes = "";
|
||||
const file = this.$refs.uploadFile.getFileList();
|
||||
console.log(file);
|
||||
if(!this.hasUpload&&file&&file.status!='finished'){
|
||||
this.loadingText='文件上传中，请耐心等待...'
|
||||
if (!this.hasUpload && file && file.status != "finished") {
|
||||
this.loadingText = "文件上传中，请耐心等待...";
|
||||
this.loading = true;
|
||||
fileRes = await $uploadVersionFile(file, { name:version });
|
||||
this.loading = false;
|
||||
// fileRes = await $uploadVersionFile(file, { name: version });
|
||||
fileRes = await this.ossClient.partUpload(
|
||||
`/version/${version}.exe`,
|
||||
file,
|
||||
(p) => {
|
||||
this.progress = Math.floor(p * 100);
|
||||
console.log("Progress: " + p * 100 + "%");
|
||||
// 这里可以根据进度做相应的处理，例如更新UI等
|
||||
}
|
||||
);
|
||||
console.log(fileRes);
|
||||
if (!fileRes) {
|
||||
this.loading = false;
|
||||
this.$notify({
|
||||
title: "失败",
|
||||
message: `上传阿里云失败`,
|
||||
type: "error",
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.progress = 0;
|
||||
let res = "";
|
||||
if (this.form.id) {
|
||||
//编辑
|
||||
res = await $version.update({...this.form,url:fileRes?fileRes.data:this.form.url});
|
||||
res = await $version.update({
|
||||
...this.form,
|
||||
url: fileRes ? fileRes : this.form.url,
|
||||
});
|
||||
this.$notify({
|
||||
title: "成功",
|
||||
message: `修改成功`,
|
||||
type: "success",
|
||||
});
|
||||
|
||||
} else {
|
||||
//添加
|
||||
if (file) {
|
||||
console.log(1);
|
||||
}
|
||||
res = await $version.add({...this.form,url:fileRes?fileRes.data:this.form.url});
|
||||
res = await $version.add({
|
||||
...this.form,
|
||||
url: fileRes ? fileRes : this.form.url,
|
||||
});
|
||||
this.$notify({
|
||||
title: "成功",
|
||||
message: `添加成功`,
|
||||
type: "success",
|
||||
});
|
||||
}
|
||||
this.loading = false;
|
||||
|
||||
this.close();
|
||||
|
||||
this.$emit("success", res);
|
||||
|
|
@ -178,13 +227,18 @@ export default {
|
|||
this.form = {
|
||||
...obj,
|
||||
};
|
||||
requestAnimationFrame(()=>{
|
||||
this.$refs.uploadFile.fileList = [{
|
||||
requestAnimationFrame(() => {
|
||||
if(obj.url){
|
||||
this.$refs.uploadFile.fileList = [
|
||||
{
|
||||
url: obj.url,
|
||||
name: obj.url,
|
||||
status: 'finished',
|
||||
}]
|
||||
})
|
||||
status: "finished",
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
},
|
||||
close() {
|
||||
|
|
@ -196,11 +250,11 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dialog-footer{
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
justify-content: right;
|
||||
}
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
justify-content: right;
|
||||
}
|
||||
.goods_info {
|
||||
background-color: #f9f9f9;
|
||||
padding: 10px;
|
||||
|
|
@ -212,5 +266,17 @@ export default {
|
|||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
region: "oss-cn-beijing",
|
||||
accessKeyId: "",
|
||||
accessKeySecret: "",
|
||||
bucket: "cashier-oss"
|
||||
}
|
||||
|
|
@ -98,7 +98,18 @@ export default {
|
|||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
onExceed() {
|
||||
onExceed(files ) {
|
||||
console.log(files);
|
||||
if(this.limit == 1&&this.fileList.length>0){
|
||||
this.fileList.splice(0,1)
|
||||
this.fileList.push(files[0])
|
||||
// this.$set(this.fileList,0,files[0])
|
||||
// this.fileList.push({
|
||||
// url: response.data[0],
|
||||
// id: response.data.id,
|
||||
// });
|
||||
return
|
||||
}
|
||||
this.$notify.error({
|
||||
title: "错误",
|
||||
message: `最多上传${this.limit}个文件`,
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
|
||||
<el-table-column label="下载地址" prop="url">
|
||||
<template v-slot="scope">
|
||||
<a class="a" :href="scope.row.url">{{ scope.row.url }}</a>
|
||||
<a class="a" :href="scope.row.url" target="_blank">{{ scope.row.url }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue