xianniu-ui 0.8.52 → 0.8.54

package/package.json

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

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,44 @@ 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) => {
+            if (item.uid === res.file.uid) {
+              const obj = JSON.parse(JSON.stringify(res));
+              delete obj.file;
+              item = Object.assign(item, obj);
+            }
+          });
+
+          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,137 @@
-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
+        const _token = localStorage.getItem('xnToken');
+        if (!_token) return '';
+
+        const isQuotedString = /^".*"$/.test(_token);
+        try {
+            if (isQuotedString) {
+                return _token.slice(1, -1);
+            } else {
+                return JSON.parse(_token);
             }
+        } catch (error) {
+            console.error('Failed to parse token:', error);
+            return _token;
         }
-        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 Promise.reject('获取临时凭证地址不能为空');
+        }
+
+        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
+            });
+            return this;
+        } catch (err) {
+            console.error('获取临时凭证失败:', err);
+            file.onError();
+            return Promise.reject(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)
-                });
-        })
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const { data } = await response.json();
+            return data;
+        } catch (err) {
+            console.error('设置文件ID失败:', err);
+            return Promise.reject(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, {
-                ...headers,
-                progress(p) {
-                    const _progress = parseFloat(p * 100)
-                    file.onProgress({ percent: _progress });
-                }
-            }).then(async res => {
-                file.onSuccess()
-                const obj = {
+        // eslint-disable-next-line no-async-promise-executor
+        return new Promise(async (resolve, reject) => {
+            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);
+                        file.onProgress({ percent: _progress });
+                    }
+                });
+
+                const fileObj = {
                     name: fileName,
                     size: currentFile.size,
                     ext: this.getExt(currentFile),
-                    imgFlag: ~~this.isImg(currentFile),
-                    isAV: ~~this.isAV(currentFile),
+                    imgFlag: Number(this.isImg(currentFile)),
+                    isAV: Number(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 => {
+                };
+
+                const fileIdResponse = await this.setFileId(fileObj);
+                file.onSuccess();
+                resolve({ ...fileObj, fileId: fileIdResponse.fileId, file: currentFile });
+            } catch (err) {
+                console.error('上传文件失败:', err);
                 file.onError();
-                reject(err)
-            })
-        })
+                reject({ file, fileName, err });
+            }
+        });
     }
 }
 
-
-export default Client
+export default Client;