From 5f8cecfa90590cc510ed6b031c4daa91d9f9859a Mon Sep 17 00:00:00 2001 From: YeMingfei666 <1619116647@qq.com> Date: Fri, 6 Sep 2024 11:08:43 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=98=BF=E9=87=8C=E4=BA=91?= =?UTF-8?q?=E5=88=87=E7=89=87=E4=B8=8A=E4=BC=A0=EF=BC=8C=E7=89=88=E6=9C=AC?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0=E5=88=87?= =?UTF-8?q?=E6=8D=A2=E4=B8=BA=E9=98=BF=E9=87=8C=E4=BA=91=E4=B8=8A=E4=BC=A0?= =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E4=B8=8A=E4=BC=A0=E8=BF=9B=E5=BA=A6?= =?UTF-8?q?=E6=9D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/api/version.js | 14 ++ src/utils/oss-upload.js | 103 +++++++++++++ .../system/version/components/add-version.vue | 140 +++++++++++++----- .../system/version/components/oss-config.js | 6 + .../system/version/components/upload-file.vue | 13 +- src/views/system/version/index.vue | 2 +- 7 files changed, 240 insertions(+), 39 deletions(-) create mode 100644 src/utils/oss-upload.js create mode 100644 src/views/system/version/components/oss-config.js diff --git a/package.json b/package.json index a18b643..9ccebed 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/api/version.js b/src/api/version.js index 3b8f2d5..f55a75f 100644 --- a/src/api/version.js +++ b/src/api/version.js @@ -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 + } + }); +} diff --git a/src/utils/oss-upload.js b/src/utils/oss-upload.js new file mode 100644 index 0000000..0852205 --- /dev/null +++ b/src/utils/oss-upload.js @@ -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; \ No newline at end of file diff --git a/src/views/system/version/components/add-version.vue b/src/views/system/version/components/add-version.vue index 8da007b..9a60047 100644 --- a/src/views/system/version/components/add-version.vue +++ b/src/views/system/version/components/add-version.vue @@ -4,11 +4,14 @@ width="500px" :visible.sync="dialogVisible" @close="diaClose" + :close-on-click-modal="false" > +
+ +
- + - +
+
- 取 消 - 确 定 -
+ 取 消 + 确 定 + \ No newline at end of file diff --git a/src/views/system/version/components/oss-config.js b/src/views/system/version/components/oss-config.js new file mode 100644 index 0000000..417458d --- /dev/null +++ b/src/views/system/version/components/oss-config.js @@ -0,0 +1,6 @@ +export default { + region: "oss-cn-beijing", + accessKeyId: "", + accessKeySecret: "", + bucket: "cashier-oss" + } \ No newline at end of file diff --git a/src/views/system/version/components/upload-file.vue b/src/views/system/version/components/upload-file.vue index 7b645a0..af67b56 100644 --- a/src/views/system/version/components/upload-file.vue +++ b/src/views/system/version/components/upload-file.vue @@ -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}个文件`, diff --git a/src/views/system/version/index.vue b/src/views/system/version/index.vue index f7dd85c..6b7a003 100644 --- a/src/views/system/version/index.vue +++ b/src/views/system/version/index.vue @@ -72,7 +72,7 @@