xianniu-ui 0.8.51 → 0.8.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xianniu-ui",
-  "version": "0.8.51",
+  "version": "0.8.53",
   "private": false,
   "main": "lib/xianniu-ui.umd.min.js",
   "scripts": {

package/packages/city/main.vue

@@ -120,7 +120,6 @@ export default {
           const res = this.findParent(_value, this.flattenResult).map(
             (item) => item.cityCode
           );
-          console.log("123", res);
           return res;
         }
       },
@@ -246,28 +245,26 @@ export default {
     //   });
     // },
     handleChange(code) {
-      const changeResults = Array.isArray(code)
-        ? code.map((c) => this.getRes(c))
-        : this.getRes(code);
+      // 判断是否是多选
+      const isMultiple = Array.isArray(code) && Array.isArray(code[0]);
 
-      const value = changeResults.map(({ cityCodeLast }) =>
-        this.valueKey ? code : cityCodeLast
-      );
-
-      this.$emit("on-change", value);
+      // 获取变更结果
+      const changeResults = (isMultiple ? code : [code]).map(this.getRes);
 
-      const cityResults = changeResults.map((res) => {
-        const { city, cityCode, cityName, cityCodeLast, cityNameLast } = res;
-        return {
-          city,
-          cityCode,
-          cityName,
-          cityCodeLast,
-          cityNameLast,
-        };
-      });
+      // 生成 value 和 cityResults
+      const [value, cityResults] = changeResults.reduce(
+        (acc, res) => {
+          const { city, cityCode, cityName, cityCodeLast, cityNameLast } = res;
+          acc[0].push(this.valueKey ? code : cityCodeLast);
+          acc[1].push({ city, cityCode, cityName, cityCodeLast, cityNameLast });
+          return acc;
+        },
+        [[], []]
+      );
 
-      this.$emit("on-city", cityResults);
+      // 触发事件
+      this.$emit("on-change", isMultiple ? value : value[0]);
+      this.$emit("on-city", isMultiple ? cityResults : cityResults[0]);
     },
     // 获取结果
     getRes(cityCode) {

package/packages/upload/main.vue

@@ -13,7 +13,6 @@
     v-bind="$attrs"
     :file-list.sync="fileList"
     :http-request="onHttpUpload"
-    :on-error="onError"
     :before-upload="onBeforeUpload"
     :style="{ ...styles, ...idCardSizeData }"
     :on-exceed="onExceed"
@@ -38,7 +37,13 @@
       </slot>
     </template>
 
-    <div slot="file" slot-scope="{ file }" :class="{'xn-upload--slot':['picture-card', 'idcard'].includes(listType)}">
+    <div
+      slot="file"
+      slot-scope="{ file }"
+      :class="{
+        'xn-upload--slot': ['picture-card', 'idcard'].includes(listType),
+      }"
+    >
       <template v-if="['list'].includes(listType)">
         <a
           class="el-upload-list__item-name"
@@ -89,6 +94,7 @@
       </template>
       <template v-if="['picture-card', 'idcard'].includes(listType)">
         <uploadPop :file="file" @on-download="handleDownload(file)"></uploadPop>
+        <div v-if="file.status === 'fail'">失败</div>
         <template v-if="$utils.isImg(file)">
           <el-image
             class="el-upload-list__item-thumbnail"
@@ -245,7 +251,6 @@ export default {
       imageView: "",
       isHidden: false,
       viewList: [],
-      files: [],
       successFiles: [],
       isUploading: false,
       file: {},
@@ -254,6 +259,8 @@ export default {
       idCardSizeData: {},
       isShowAV: false,
       avUrl: "",
+      realFileList: [],
+      reUploadFile: {},
     };
   },
   computed: {
@@ -265,11 +272,14 @@ export default {
     fileSize() {
       return this.$format.bytesToSize(this.file.size);
     },
+    isMultiple() {
+      return this.$attrs.multiple;
+    },
   },
   watch: {
     fileList: {
       handler(n) {
-        this.successFiles = n;
+        // this.successFiles = n;
         this.isHidden = this.limit === n.length;
       },
       immediate: true,
@@ -344,29 +354,43 @@ export default {
       });
     },
     onChange(file, fileList) {
-      this.files = fileList;
+      this.realFileList = fileList;
     },
     async onHttpUpload(file) {
+      this.handleUpload(file);
+    },
+    handleUpload(file) {
       this.isUploading = true;
       this.$emit("on-uploaded", false);
       this.oss
         .upload(file)
         .then((res) => {
           this.successFiles.push(res);
-          this.$emit("update:fileList", this.successFiles);
+
+          this.realFileList.forEach((item, idx) => {
+            if (item.uid === res.file.uid) {
+              delete res.file;
+              this.$set(this.realFileList, idx, res);
+            }
+          });
+
+          this.$emit("update:fileList", this.realFileList);
           this.$emit("on-file", this.res);
           this.$emit("on-success", this.successFiles);
           this.$emit("on-uploaded", true);
           this.isUploading = false;
         })
-        .catch(() => {
-          this.$emit("update:fileList", this.successFiles);
+        .catch(({ fileName }) => {
+          this.$notify.error({
+            title: "上传失败",
+            dangerouslyUseHTMLString: true,
+            message:`<div><p>文件名：</p>${fileName}</div>`,
+          });
         });
     },
-
-    onError() {
-      this.$message.error("上传失败，请重试");
-    },
+    // onError() {
+    //   this.$message.error("上传失败，请重试");
+    // },
     onSubmitUpload() {
       this.$refs.upload.submit();
     },

package/src/oss/index.js

@@ -1,130 +1,121 @@
-const OSS = require('ali-oss')
-import $dayjs from '@/utils/dayjs'
+const OSS = require('ali-oss');
+import $dayjs from '@/utils/dayjs';
 const { v4: uuidv4 } = require('uuid');
+
 class Client {
     constructor(params = {}) {
-        this.uploadHost = null
-        this.stsUrl = params.stsUrl || ''
-        this.setFileIdUrl = params.setFileIdUrl || ''
-        this.oss = null
+        this.uploadHost = null;
+        this.stsUrl = params.stsUrl || '';
+        this.setFileIdUrl = params.setFileIdUrl || '';
+        this.oss = null;
     }
+
     getToken() {
-        const _token = localStorage.getItem('xnToken')
-        let token = ''
-        if (_token) {
-            try {
-                token = JSON.parse(_token)
-            } catch (error) {
-                token = _token
-            }
+        try {
+            const _token = localStorage.getItem('xnToken');
+            return _token ? JSON.parse(_token) : '';
+        } catch (error) {
+            console.error('Failed to parse token:', error);
+            return '';
         }
-        return token
     }
+
     getExt(file) {
-        let fileExt = file.name.substring(file.name.lastIndexOf(".") + 1);
-        // 判断上传格式
-        return `${fileExt}`.toLowerCase();
+        return file.name.split('.').pop().toLowerCase();
     }
+
     isImg(file) {
-        return file.type.indexOf('image') > -1
+        return file.type.startsWith('image');
     }
-    isAV(file){
-        return file.type.indexOf('audio') > -1 || file.type.indexOf('video') > -1
+
+    isAV(file) {
+        return file.type.startsWith('audio') || file.type.startsWith('video');
     }
+
     getFileNameUUID() {
-        const uuid = uuidv4()
-        return uuid
+        return uuidv4();
     }
-    getStsToken(file) {
-        return new Promise((resolve, reject) => {
-            if (!this.stsUrl) {
-                console.error('获取临时凭证地址不能为空');
-                file.onError()
-                return
-            }
 
-            fetch(this.stsUrl + '?xnToken=' + this.getToken()).then(response => response.json()).then((res) => {
-                const { data: { accessKeyId, accessKeySecret, securityToken: stsToken, uploadHost, bucket, region } } = res
-                const obj = {
-                    accessKeyId,
-                    accessKeySecret,
-                    stsToken,
-                    uploadHost,
-                    bucket,
-                    region
-                }
-                this.uploadHost = uploadHost
-                this.oss = new OSS({
-                    ...obj,
-                })
-                resolve(this)
-            }).catch((err) => {
-                reject(err)
-            })
+    async getStsToken(file) {
+        if (!this.stsUrl) {
+            console.error('获取临时凭证地址不能为空');
+            file.onError();
+            return;
+        }
 
-        })
+        try {
+            const response = await fetch(this.stsUrl + '?xnToken=' + this.getToken());
+            const res = await response.json();
+            const { accessKeyId, accessKeySecret, securityToken: stsToken, uploadHost, bucket, region } = res.data;
+            this.uploadHost = uploadHost;
+            this.oss = new OSS({
+                accessKeyId,
+                accessKeySecret,
+                stsToken,
+                bucket,
+                region
+            });
+        } catch (err) {
+            console.error('获取临时凭证失败:', err);
+            throw err;
+        }
     }
-    setFileId(params) {
-        return new Promise((resolve, reject) => {
-            fetch(this.setFileIdUrl, {
+
+    async setFileId(params) {
+        try {
+            const response = await fetch(this.setFileIdUrl, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                     'xnToken': this.getToken()
                 },
                 body: JSON.stringify(params)
-            })
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error(`HTTP error! status: ${response.status}`);
-                    }
-                    return response.json()
-                })
-                .then(({ data }) => {
-                    resolve(data)
-                }).catch((err) => {
-                    reject(err)
-                });
-        })
+            });
+            const { data } = await response.json();
+            return data;
+        } catch (err) {
+            console.error('设置文件ID失败:', err);
+            throw err;
+        }
     }
-    upload(file, headers = {}) {
-        const currentFile = file.file
-        const fileName = currentFile.name
-        const newFileName = this.getFileNameUUID() + '.' + this.getExt(currentFile)
-        const path = `accessory/${$dayjs().format('YYYY/MM/DD')}/`
-        return new Promise((resolve, reject) => {
-            this.oss.multipartUpload(path + newFileName, currentFile, {
+
+    async upload(file, headers = {}) {
+        const currentFile = file.file;
+        const fileName = currentFile.name;
+        const newFileName = this.getFileNameUUID() + '.' + this.getExt(currentFile);
+        const path = `accessory/${$dayjs().format('YYYY/MM/DD')}/`;
+
+        try {
+            await this.getStsToken(file);
+
+            const res = await this.oss.multipartUpload(path + newFileName, currentFile, {
                 ...headers,
-                progress(p) {
-                    const _progress = parseFloat(p * 100)
+                progress: (p) => {
+                    const _progress = parseFloat(p * 100);
                     file.onProgress({ percent: _progress });
                 }
-            }).then(async res => {
-                file.onSuccess()
-                const obj = {
-                    name: fileName,
-                    size: currentFile.size,
-                    ext: this.getExt(currentFile),
-                    imgFlag: ~~this.isImg(currentFile),
-                    isAV: ~~this.isAV(currentFile),
-                    url: this.uploadHost + res.name,
-                    accessoryName: fileName,
-                    accessorySize: currentFile.size
-                }
-                this.setFileId(obj).then((res) => {
-                    resolve({ ...obj, fileId: res.fileId })
-                }).catch((err) => {
-                    file.onError();
-                    reject(err)
-                })
+            });
 
-            }).catch(err => {
-                file.onError();
-                reject(err)
-            })
-        })
+            const obj = {
+                name: fileName,
+                size: currentFile.size,
+                ext: this.getExt(currentFile),
+                imgFlag: Number(this.isImg(currentFile)),
+                isAV: Number(this.isAV(currentFile)),
+                url: this.uploadHost + res.name,
+                accessoryName: fileName,
+                accessorySize: currentFile.size
+            };
+            
+            const fileIdResponse = await this.setFileId(obj);
+            file.onSuccess();
+            return { ...obj, fileId: fileIdResponse.fileId, file: currentFile };
+        } catch (err) {
+            file.onError();
+            console.error('上传文件失败:', err);
+            throw err;
+        }
     }
 }
 
-
-export default Client
+export default Client;