lw-cdp-ui 1.4.19 → 1.4.20

package/dist/components/lwUpload/index.vue

@@ -1,37 +1,28 @@
 <template>
-  <div class="lw-upload"
-       :class="{ 'lw-upload-round': round }">
+  <div class="lw-upload" :class="{ 'lw-upload-round': round }">
     <!-- 文件预览列表 -->
     <div class="view-img-list">
-      <template v-for="(f, index) in fileList"
-                :key="index">
-        <div class="lw-upload__img"
-             :style="style">
+      <template v-for="(f, index) in fileList" :key="index">
+        <div class="lw-upload__img" :style="style">
           <!-- 如果允许图片，显示图片预览 -->
-          <el-image v-if="isAcceptImage"
-                    class="image"
-                    z-index="99"
-                    :src="getShowValue(f)"
-                    :preview-src-list="fileList"
-                    fit="cover"
-                    hide-on-click-modal
-                    append-to-body
-                    :z-index="9999">
+          <el-image
+            v-if="isAcceptImage"
+            class="image"
+            :src="getShowValue(f)"
+            :preview-src-list="fileList"
+            fit="cover"
+            hide-on-click-modal
+            append-to-body
+            :z-index="9999">
             <template #placeholder>
-              <div class="lw-upload__img-slot">
-                Loading...
-              </div>
+              <div class="lw-upload__img-slot">Loading...</div>
             </template>
           </el-image>
           <!-- 如果允许视频，显示视频预览 -->
-          <video v-if="isAcceptVideo"
-                 :src="getShowValue(f)"
-                 controls></video>
+          <video v-if="isAcceptVideo" :src="getShowValue(f)" controls></video>
           <!-- 删除按钮，仅在未禁用状态下显示 -->
-          <div class="lw-upload__img-actions"
-               v-if="!disabled">
-            <span class="del"
-                  @click="handleRemove(index)">
+          <div class="lw-upload__img-actions" v-if="!disabled">
+            <span class="del" @click="handleRemove(index)">
               <el-icon><el-icon-delete /></el-icon>
             </span>
           </div>
@@ -39,24 +30,25 @@
       </template>
 
       <!-- 上传按钮（当文件数量未达到限制时显示） -->
-      <el-upload v-if="fileList.length < limit"
-                 class="uploader"
-                 :style="style"
-                 ref="uploader"
-                 :auto-upload="autoUpload"
-                 :disabled="disabled"
-                 :show-file-list="showFileList"
-                 :action="action"
-                 :name="name"
-                 :data="data"
-                 :accept="accept"
-                 :limit="limit"
-                 :http-request="request"
-                 :on-change="change"
-                 :before-upload="before"
-                 :on-success="success"
-                 :on-error="error"
-                 :on-exceed="handleExceed">
+      <el-upload
+        v-if="fileList.length < limit"
+        class="uploader"
+        :style="style"
+        ref="uploader"
+        :auto-upload="autoUpload"
+        :disabled="disabled"
+        :show-file-list="showFileList"
+        :action="action"
+        :name="name"
+        :data="data"
+        :accept="accept"
+        :limit="limit"
+        :http-request="request"
+        :on-change="change"
+        :before-upload="before"
+        :on-success="success"
+        :on-error="error"
+        :on-exceed="handleExceed">
         <slot>
           <div class="el-upload--picture-card">
             <div class="file-empty">
@@ -66,12 +58,8 @@
               <h4 v-if="title">{{ title }}</h4>
             </div>
             <!-- 上传过程中显示进度条 -->
-            <div v-if="file && file.percentage"
-                 :style="style"
-                 class="lw-upload__progress">
-              <el-progress :percentage="file.percentage"
-                           :text-inside="true"
-                           :stroke-width="16" />
+            <div v-if="file && file.percentage" :style="style" class="lw-upload__progress">
+              <el-progress :percentage="file.percentage" :text-inside="true" :stroke-width="16" />
               <span v-if="file.percentage == 100">已上传，处理中···</span>
             </div>
           </div>
@@ -80,8 +68,7 @@
     </div>
 
     <!-- 上传提示信息 -->
-    <div v-if="tip"
-         class="el-upload__tip">
+    <div v-if="tip" class="el-upload__tip">
       {{ tip }}
     </div>
   </div>
@@ -113,18 +100,18 @@ export default {
    * @property {Function} parseData - 解析上传响应数据的函数，默认为解析状态码、文件名、图片远程地址和描述字段
    */
   props: {
-    modelValue: { type: [String, Array, Boolean, Object], default: "" },
+    modelValue: { type: [String, Array, Boolean, Object], default: '' },
     height: { type: Number, default: 148 },
     width: { type: Number, default: 148 },
     iconSize: { type: Number, default: 36 },
-    title: { type: String, default: "" },
-    tip: { type: String, default: "" },
-    icon: { type: String, default: "el-icon-plus" },
-    action: { type: String, default: () => { } },
-    apiObj: { type: [Object, Function], default: () => { } },
-    name: { type: String, default: "file" },
-    data: { type: Object, default: () => { } },
-    accept: { type: String, default: "image/gif, image/jpeg, image/png" },
+    title: { type: String, default: '' },
+    tip: { type: String, default: '' },
+    icon: { type: String, default: 'el-icon-plus' },
+    action: { type: String, default: () => {} },
+    apiObj: { type: [Object, Function], default: () => {} },
+    name: { type: String, default: 'file' },
+    data: { type: Object, default: () => {} },
+    accept: { type: String, default: 'image/gif, image/jpeg, image/png' },
     maxSize: { type: Number, default: 10 },
     limit: { type: Number, default: 1 },
     autoUpload: { type: Boolean, default: true },
@@ -132,8 +119,14 @@ export default {
     multiple: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     round: { type: Boolean, default: false },
-    onSuccess: { type: Function, default: () => { return true } },
-    returnFile: { // 单传'url' 就返回数组 传对象映射关系就返回数组对象
+    onSuccess: {
+      type: Function,
+      default: () => {
+        return true
+      }
+    },
+    returnFile: {
+      // 单传'url' 就返回数组 传对象映射关系就返回数组对象
       type: [Object, String],
       default: {
         url: 'url', // 第一个就是默认图片字段
@@ -143,23 +136,24 @@ export default {
         type: 'type',
         name: 'name',
         size: 'size',
-        tempCropperFile: 'tempCropperFile',
+        tempCropperFile: 'tempCropperFile'
       }
     },
     parseData: {
-      type: Function, default: (res) => {
+      type: Function,
+      default: (res) => {
         return {
-          code: 200,//分析状态字段结构
-          fileName: res.fileName,//分析文件名称
-          src: res?.previewInfo?.prefix ? `${res.previewInfo.prefix}${res.path}` : res.previewInfo.url,			//分析图片远程地址结构
-          msg: res.message			//分析描述字段结构
+          code: 200, //分析状态字段结构
+          fileName: res.fileName, //分析文件名称
+          src: res?.previewInfo?.prefix ? `${res.previewInfo.prefix}${res.path}` : res.previewInfo.url, //分析图片远程地址结构
+          msg: res.message //分析描述字段结构
         }
       }
     }
   },
   data() {
     return {
-      value: "",
+      value: '',
       file: null,
       fileList: []
     }
@@ -168,21 +162,21 @@ export default {
     // 计算上传组件的样式
     style() {
       return {
-        width: this.width + "px",
-        height: this.height + "px"
+        width: this.width + 'px',
+        height: this.height + 'px'
       }
     },
     // 计算上传组件是否显示上传按钮
     acceptedTypes() {
-      return this.accept.replace(/\s/g, "").split(",");
+      return this.accept.replace(/\s/g, '').split(',')
     },
     // 判断是否允许上传图片（判断字符串中是否包含 "image"）
     isAcceptImage() {
-      return this.accept.indexOf('image') > -1;
+      return this.accept.indexOf('image') > -1
     },
     // 判断是否允许上传视频（判断字符串中是否包含 "video"）
     isAcceptVideo() {
-      return this.accept.indexOf('video') > -1;
+      return this.accept.indexOf('video') > -1
     }
   },
   watch: {
@@ -190,20 +184,20 @@ export default {
      * 监听外部绑定值的变化，更新内部值和文件列表
      */
     modelValue(val) {
-      this.value = val;
-      this.newFile(val);
+      this.value = val
+      this.newFile(val)
     },
     /**
      * 当内部值变化时，通过事件通知外部更新绑定值
      */
     value(val) {
-      this.$emit('update:modelValue', val);
+      this.$emit('update:modelValue', val)
     }
   },
   mounted() {
     // 初始化组件内部值和文件列表
-    this.value = this.modelValue;
-    this.newFile(this.modelValue);
+    this.value = this.modelValue
+    this.newFile(this.modelValue)
   },
   methods: {
     /**
@@ -212,32 +206,32 @@ export default {
      */
     newFile(url) {
       if (this.multiple) {
-        this.fileList = url || [];
+        this.fileList = url || []
       } else {
-        this.fileList = url ? [url] : [];
+        this.fileList = url ? [url] : []
       }
-      this.file = url ? { status: "success", url: url } : null;
+      this.file = url ? { status: 'success', url: url } : null
     },
     /**
      * 删除指定索引的文件，并清理相关数据
      * @param {Number} index - 要删除的文件索引
      */
     handleRemove(index) {
-      this.fileList.splice(index, 1);
-      this.clearFiles();
+      this.fileList.splice(index, 1)
+      this.clearFiles()
     },
     /**
      * 清除当前文件及上传组件内部缓存的文件数据
      */
     clearFiles() {
       if (this.file && this.file.tempFile) {
-        URL.revokeObjectURL(this.file.tempFile);
+        URL.revokeObjectURL(this.file.tempFile)
       }
-      this.value = this.multiple ? this.fileList : "";
-      this.file = null;
+      this.value = this.multiple ? this.fileList : ''
+      this.file = null
       this.$nextTick(() => {
-        this.$refs.uploader && this.$refs.uploader.clearFiles();
-      });
+        this.$refs.uploader && this.$refs.uploader.clearFiles()
+      })
     },
     /**
      * 上传文件状态变化时的回调函数
@@ -247,20 +241,20 @@ export default {
      */
     change(file, files) {
       if (!this.multiple && files.length > 1) {
-        files.splice(1);
+        files.splice(1)
       }
-      const fileType = file.raw && file.raw.type;
+      const fileType = file.raw && file.raw.type
       if (file.status === 'ready' && fileType && !this.acceptedTypes.includes(fileType)) {
         this.$notify.warning({
           title: '上传文件警告',
           message: '选择的文件类型不符合要求'
-        });
-        return false;
+        })
+        return false
       }
       if (file.status === 'ready' && file.raw) {
-        file.tempFile = URL.createObjectURL(file.raw);
+        file.tempFile = URL.createObjectURL(file.raw)
       }
-      this.file = file;
+      this.file = file
     },
     /**
      * 上传前的校验函数
@@ -273,26 +267,26 @@ export default {
         this.$notify.warning({
           title: '上传文件错误',
           message: '选择的文件类型不正确'
-        });
-        this.clearFiles();
-        return false;
+        })
+        this.clearFiles()
+        return false
       }
       // 校验文件大小是否超出限制（单位：MB）
       if (file.size / 1024 / 1024 > this.maxSize) {
-        this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
-        this.clearFiles();
-        return false;
+        this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`)
+        this.clearFiles()
+        return false
       }
-      return true;
+      return true
     },
     /**
      * 当上传文件数量超过限制时的处理函数
      * @param {Array} files - 超出限制的文件列表
      */
     handleExceed(files) {
-      const file = files[0];
-      file.uid = this.$tool ? this.$tool.getUUID('file', 16) : Date.now();
-      this.$refs.uploader.handleStart(file);
+      const file = files[0]
+      file.uid = this.$tool ? this.$tool.getUUID('file', 16) : Date.now()
+      this.$refs.uploader.handleStart(file)
     },
     /**
      * 上传成功的回调函数
@@ -300,46 +294,46 @@ export default {
      * @param {Object} file - 上传成功的文件对象
      */
     success(res, file) {
-      file.type = file.raw.type;
+      file.type = file.raw.type
       if (file.tempFile) {
-        URL.revokeObjectURL(file.tempFile);
+        URL.revokeObjectURL(file.tempFile)
       }
       // 清理不必要的属性
-      delete file.tempFile;
-      delete file.percentage;
-      delete file.raw;
-      delete file.response;
-      delete file.uid;
+      delete file.tempFile
+      delete file.percentage
+      delete file.raw
+      delete file.response
+      delete file.uid
 
-      const callbackResult = this.onSuccess(res, file);
+      const callbackResult = this.onSuccess(res, file)
       if (callbackResult === false) {
         this.$nextTick(() => {
-          this.file = null;
-          this.value = "";
-        });
-        return false;
+          this.file = null
+          this.value = ''
+        })
+        return false
       }
 
       // 解析上传接口返回的数据
-      const response = this.parseData(res);
-      file.url = response.src;
+      const response = this.parseData(res)
+      file.url = response.src
 
-      const sourceObject = { ...response, ...file };
+      const sourceObject = { ...response, ...file }
       if (typeof this.returnFile === 'object') {
         const mappedObject = Object.entries(this.returnFile).reduce((acc, [key, value]) => {
           if (sourceObject[key] !== undefined) {
-            acc[value] = sourceObject[key];
+            acc[value] = sourceObject[key]
           }
-          return acc;
-        }, {});
-        this.fileList.push(mappedObject);
+          return acc
+        }, {})
+        this.fileList.push(mappedObject)
       } else {
         // 若 returnFile 为字符串，则直接返回对应字段的值
-        this.fileList.push(sourceObject[this.returnFile]);
+        this.fileList.push(sourceObject[this.returnFile])
       }
 
       // 更新绑定值：多文件上传返回数组，否则返回单个文件 URL
-      this.value = this.multiple ? this.fileList : file.url;
+      this.value = this.multiple ? this.fileList : file.url
     },
     /**
      * 上传失败的回调函数
@@ -347,12 +341,12 @@ export default {
      */
     error(err) {
       this.$nextTick(() => {
-        if (this.file) delete this.file.percentage;
-      });
+        if (this.file) delete this.file.percentage
+      })
       this.$notify.error({
         title: '上传文件失败',
         message: err
-      });
+      })
     },
     /**
      * 自定义上传请求方法，支持上传进度更新
@@ -360,26 +354,28 @@ export default {
      */
     request(param) {
       let apiObj = this.apiObj || this.$api.auth.upload
-      const data = new FormData();
-      data.append(param.filename, param.file);
-      data.append('fileName', param.file.name);
+      const data = new FormData()
+      data.append(param.filename, param.file)
+      data.append('fileName', param.file.name)
       for (const key in param.data) {
-        data.append(key, param.data[key]);
+        data.append(key, param.data[key])
       }
       apiObj(data, {
-        onUploadProgress: e => {
+        onUploadProgress: (e) => {
           this.file.percentage = parseInt(((e.loaded / e.total) * 100) | 0, 10)
         }
-      }).then(res => {
-        var response = this.parseData(res);
-        if (response.code == 200) {
-          param.onSuccess(res)
-        } else {
-          param.onError(response.msg || "未知错误")
-        }
-      }).catch(err => {
-        param.onError(err)
       })
+        .then((res) => {
+          var response = this.parseData(res)
+          if (response.code == 200) {
+            param.onSuccess(res)
+          } else {
+            param.onError(response.msg || '未知错误')
+          }
+        })
+        .catch((err) => {
+          param.onError(err)
+        })
     },
     /**
      * 获取用于预览显示的文件 URL
@@ -389,13 +385,13 @@ export default {
     getShowValue(item) {
       if (this.multiple) {
         if (typeof this.returnFile === 'object') {
-          const firstKey = Object.keys(this.returnFile)[0];
-          return item[this.returnFile[firstKey]];
+          const firstKey = Object.keys(this.returnFile)[0]
+          return item[this.returnFile[firstKey]]
         } else {
-          return item;
+          return item
         }
       } else {
-        return item;
+        return item
       }
     }
   }