feat: 版本管理文件上传修改为 oss 真传

package.json

@@ -36,6 +36,7 @@
     "@vueuse/core": "^12.5.0",
     "@wangeditor-next/editor": "^5.6.31",
     "@wangeditor-next/editor-for-vue": "^5.1.14",
+    "ali-oss": "^6.22.0",
     "axios": "^1.7.9",
     "bwip-js": "^4.5.1",
     "codemirror": "^5.65.18",
@@ -57,6 +58,7 @@
     "sockjs-client": "^1.6.1",
     "sortablejs": "^1.15.6",
     "vue": "^3.5.13",
+    "vue-clipboard3": "^2.0.0",
     "vue-i18n": "^11.1.0",
     "vue-router": "^4.5.0"
   },

src/api/system/version.ts

@@ -29,10 +29,27 @@ const VersionApi = {
       method: "delete",
     });
   },
+  //获取上传临时凭证
+  getCredentials() {
+    return request<any, ossConfig>({
+      url: `${baseURL}/getCredentials`,
+      method: "get",
+    });
+  },
 };
 
+
+
 export default VersionApi;
 
+export interface ossConfig {
+  accessKeyId: string;
+  accessKeySecret: string;
+  expiration: string;
+  securityToken: number;
+}
+
+
 export interface versionForm {
   /**
    * 版本 id

src/utils/oss-upload.js

@@ -0,0 +1,124 @@
+import OSS from "ali-oss";
+import versionApi from "@/api/system/version";
+
+const $headers = {
+  "Access-Control-Allow-Origin": "*",
+};
+const $config = {
+  region: "oss-cn-beijing",
+  accessKeyId: "",
+  accessKeySecret: "",
+  bucket: "cashier-oss",
+};
+import { ElMessage } from "element-plus";
+function urlConversion(path) {
+  let reg = /^(https?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i;
+  path = path.replace(reg, "https://$2$3$4$5$6");
+  return path;
+}
+
+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 versionApi.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---");
+      console.log(resp);
+      return urlConversion(`${resp.requestUrls[0]}`.split("?")[0]);
+    } catch (e) {
+      console.log("------e---");
+      console.log(e);
+      if (e.name == "cancel") {
+        ElMessage.error({
+          title: "上传已取消",
+          duration: 3000,
+        });
+        return e;
+      }
+    }
+  }
+
+  /**
+   * 结束上传并删除碎片
+   * @param {Object} client
+   * @param {Object} uploadId
+   * @param {Object} name
+   */
+  async abortUpload(uploadId, name) {
+    try {
+      const res = await this.ossClient.abortMultipartUpload(name, uploadId);
+      return res;
+    } catch (error) {
+      console.log(error);
+      return error;
+    }
+  }
+}
+export default ossClient;

src/views/admim/system/version/components/version-file.vue

@@ -0,0 +1,296 @@
+<!-- 文件上传组件 -->
+<template>
+  <div>
+    <el-upload
+      v-model:file-list="fileList"
+      :auto-upload="true"
+      :style="props.style"
+      :before-upload="handleBeforeUpload"
+      :http-request="handleUpload"
+      :on-progress="handleProgress"
+      :on-success="handleSuccess"
+      :on-error="handleError"
+      :accept="props.accept"
+      :limit="props.limit"
+      multiple
+    >
+      <!-- 上传文件按钮 -->
+      <el-button type="primary" :disabled="fileList.length >= props.limit">
+        {{ props.uploadBtnText }}
+      </el-button>
+
+      <!-- 文件列表 -->
+      <template #file="{ file }">
+        <div class="el-upload-list__item-info">
+          <a class="el-upload-list__item-name" @click="handleDownload(file)">
+            <el-icon><Document /></el-icon>
+            <span class="el-upload-list__item-file-name">{{ file.name }}</span>
+            <span class="el-icon--close" @click="handleRemove(file.url!)">
+              <el-icon><Close /></el-icon>
+            </span>
+          </a>
+        </div>
+      </template>
+    </el-upload>
+
+    <el-progress
+      :style="{
+        display: showProgress ? 'inline-flex' : 'none',
+        width: '100%',
+      }"
+      :percentage="progressPercent"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import {
+  UploadRawFile,
+  UploadUserFile,
+  UploadProgressEvent,
+  UploadRequestOptions,
+} from "element-plus";
+import VersionApi from "@/api/system/version";
+import OSS from "@/utils/oss-upload.js";
+let ossClient: any = null;
+async function getCredentials() {
+  const res = await VersionApi.getCredentials();
+  ossClient = new OSS({ ...res, stsToken: res.securityToken });
+  console.log(ossClient);
+}
+onMounted(() => {
+  getCredentials();
+});
+import CommonApi, { FileInfo, uploadResponse } from "@/api/account/common";
+
+const props = defineProps({
+  version: {
+    type: [Boolean, Number],
+    default: "",
+  },
+  /**
+   * 请求携带的额外参数
+   */
+  data: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+  /**
+   * 上传文件的参数名
+   */
+  name: {
+    type: String,
+    default: "file",
+  },
+  /**
+   * 文件上传数量限制
+   */
+  limit: {
+    type: Number,
+    default: 1,
+  },
+  /**
+   * 单个文件上传大小限制(单位MB)
+   */
+  maxFileSize: {
+    type: Number,
+    default: 300,
+  },
+  /**
+   * 上传文件类型
+   */
+  accept: {
+    type: String,
+    default: "*",
+  },
+  /**
+   * 上传按钮文本
+   */
+  uploadBtnText: {
+    type: String,
+    default: "上传文件",
+  },
+
+  /**
+   * 样式
+   */
+  style: {
+    type: Object,
+    default: () => {
+      return {
+        width: "300px",
+      };
+    },
+  },
+});
+
+const modelValue = defineModel("modelValue", {
+  type: [Array] as PropType<string[]>,
+  required: true,
+  default: () => [],
+});
+
+const fileList = ref([] as UploadUserFile[]);
+
+const showProgress = ref(false);
+const progressPercent = ref(0);
+
+// 监听 modelValue 转换用于显示的 fileList
+watch(
+  modelValue,
+  (value) => {
+    fileList.value = value.map((url) => {
+      const name = url.substring(url.lastIndexOf("/") + 1);
+      return {
+        name: name,
+        url: url,
+      } as UploadUserFile;
+    });
+  },
+  {
+    immediate: true,
+  }
+);
+
+/**
+ * 上传前校验
+ */
+function handleBeforeUpload(file: UploadRawFile) {
+  // 限制文件大小
+  if (file.size > props.maxFileSize * 1024 * 1024) {
+    ElMessage.warning("上传图片不能大于" + props.maxFileSize + "M");
+    return false;
+  }
+  return true;
+}
+
+/*
+ * 上传文件
+ */
+function handleUpload(options: UploadRequestOptions) {
+  return new Promise((resolve, reject) => {
+    const file = options.file;
+
+    const formData = new FormData();
+    formData.append(props.name, file);
+
+    // 处理附加参数
+    Object.keys(props.data).forEach((key) => {
+      formData.append(key, props.data[key]);
+    });
+    const name = file.name;
+    showProgress.value = true;
+    ossClient
+      .partUpload(`/version/${props.version}${name.replace(".apk", "")}`, file, (p: number) => {
+        console.log("进度", p);
+        handleProgress({
+          percent: Math.floor(p * 100),
+          lengthComputable: true,
+          loaded: p * file.size,
+          total: file.size,
+          target: null,
+          timeStamp: Date.now(),
+          type: "",
+          eventPhase: 0,
+          bubbles: false,
+          cancelable: false,
+          defaultPrevented: false,
+          isTrusted: true,
+          returnValue: true,
+          srcElement: null,
+          currentTarget: null,
+          composed: false,
+          cancelBubble: false,
+          NONE: 0,
+          CAPTURING_PHASE: 1,
+          AT_TARGET: 2,
+          BUBBLING_PHASE: 3,
+          composedPath: () => [],
+          initEvent: () => {},
+          preventDefault: () => {},
+          stopImmediatePropagation: () => {},
+          stopPropagation: () => {},
+        });
+        // 这里可以根据进度做相应的处理，例如更新UI等
+      })
+      .then((data: any) => {
+        console.log(data);
+        resolve(data);
+      })
+      .catch((error: any) => {
+        reject(error);
+      });
+    // CommonApi.upload(formData)
+    //   .then((data) => {
+    //     resolve(data);
+    //   })
+    //   .catch((error) => {
+    //     reject(error);
+    //   });
+  });
+}
+
+/**
+ * 上传进度
+ *
+ * @param event
+ */
+const handleProgress = (event: UploadProgressEvent) => {
+  progressPercent.value = event.percent;
+  if (progressPercent.value >= 100) {
+    showProgress.value = false;
+  }
+};
+
+/**
+ * 上传成功
+ */
+const handleSuccess = (fileInfo: string) => {
+  ElMessage.success("上传成功");
+  modelValue.value = [...modelValue.value, fileInfo];
+};
+
+const handleError = (error: any) => {
+  ElMessage.error("上传失败");
+};
+
+/**
+ * 删除文件
+ */
+function handleRemove(fileUrl: string) {
+  // CommonApi.delete(fileUrl).then(() => {
+  modelValue.value = modelValue.value.filter((url) => url !== fileUrl);
+  // });
+}
+
+/**
+ * 下载文件
+ */
+function handleDownload(file: UploadUserFile) {
+  // const { url, name } = file;
+  // if (url) {
+  //   CommonApi.download(url, name);
+  // }
+}
+</script>
+<style lang="scss" scoped>
+.el-upload-list__item .el-icon--close {
+  position: absolute;
+  top: 50%;
+  right: 5px;
+  color: var(--el-text-color-regular);
+  cursor: pointer;
+  opacity: 0.75;
+  transition: opacity var(--el-transition-duration);
+  transform: translateY(-50%);
+}
+
+:deep(.el-upload-list) {
+  margin: 0;
+}
+
+:deep(.el-upload-list__item) {
+  margin: 0;
+}
+</style>

src/views/admim/system/version/config/add.ts

@@ -51,6 +51,7 @@ const modalConfig: IModalConfig<addRequest> = {
       attrs: {
         placeholder: "请输入版本号",
       },
+      watch: () => { }
     },
     {
       type: "radio",
@@ -80,6 +81,7 @@ const modalConfig: IModalConfig<addRequest> = {
       attrs: {
         placeholder: "请上传版本文件",
       },
+      hidden: true,
       initialValue: [],
     },
   ],

src/views/admim/system/version/index.vue

@@ -42,10 +42,18 @@
     </page-content>
 
     <!-- 新增 -->
-    <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
+    <page-modal
+      ref="addModalRef"
+      @form-data-change="handleFormDataChange"
+      :modal-config="addModalConfig"
+      @submit-click="handleSubmitClick"
+    >
       <template #url="scope">
-        <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
+        <version-file
-        <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
+          :version="version"
+          v-model="scope.formData[scope.prop]"
+          v-bind="scope.attrs"
+        ></version-file>
       </template>
     </page-modal>
 
@@ -56,14 +64,18 @@
       @submit-click="handleSubmitClick"
     >
       <template #url="scope">
-        <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
+        <version-file
-        <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
+          :version="version"
+          v-model="scope.formData[scope.prop]"
+          v-bind="scope.attrs"
+        ></version-file>
       </template>
     </page-modal>
   </div>
 </template>
 
 <script setup lang="ts">
+import versionFile from "./components/version-file.vue";
 import VersionApi from "@/api/system/version";
 import type { IObject, IOperatData } from "@/components/CURD/types";
 import usePage from "@/components/CURD/usePage";
@@ -73,6 +85,19 @@ import editModalConfig from "./config/edit";
 import searchConfig from "./config/search";
 import { returnOptionsLabel } from "./config/config";
 
+let version = ref<string | number>("");
+function handleFormDataChange(type: string, value: string | number) {
+  version.value = value;
+  if (type === "version" && value !== "") {
+    addModalConfig.formItems[5].hidden = false;
+    return;
+  }
+  if (type === "version" && value == "") {
+    addModalConfig.formItems[5].hidden = true;
+  }
+}
+
+const refVersionFile = ref<any>();
 const {
   searchRef,
   contentRef,

src/views/login/index.vue

@@ -15,9 +15,9 @@
           <el-radio-button :value="1">员工</el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <el-form-item prop="merchantName" v-if="state.loginForm.loginType == 1">
+      <el-form-item prop="staffUserName" v-if="state.loginForm.loginType == 1">
         <el-input
-          v-model="state.loginForm.merchantName"
+          v-model="state.loginForm.staffUserName"
           type="text"
           auto-complete="off"
           placeholder="商户号"
@@ -97,14 +97,14 @@ const state = reactive({
     // rememberMe: false,
     code: "",
     uuid: "",
-    merchantName: "",
+    staffUserName: "",
     loginType: 0,
   },
   loginRules: {
     username: [{ required: true, trigger: "blur", message: "用户名不能为空" }],
     password: [{ required: true, trigger: "blur", message: "密码不能为空" }],
     code: [{ required: true, trigger: "change", message: "验证码不能为空" }],
-    merchantName: [{ required: true, trigger: "change", message: "商户号不能为空" }],
+    staffUserName: [{ required: true, trigger: "change", message: "商户号不能为空" }],
   },
   loading: false,
   redirect: undefined,
@@ -120,8 +120,8 @@ onMounted(() => {
 
   let getinfo = localStorage.getItem("MerchantId");
   let info = JSON.parse(getinfo);
-  if (info && info.merchantName) {
+  if (info && info.staffUserName) {
-    state.loginForm.merchantName = info.merchantName;
+    state.loginForm.staffUserName = info.staffUserName;
     state.loginForm.username = info.username;
   }
 });
@@ -144,7 +144,7 @@ function getCookie() {
     password: password,
     rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
     code: "",
-    merchantName: "",
+    staffUserName: "",
     loginType: 0,
   };
 }