lw-cdp-ui 1.2.47 → 1.2.49

package/dist/components/lwUpload/index.vue

@@ -1,564 +0,0 @@
-<template>
-  <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">
-          <!-- 如果允许图片，显示图片预览 -->
-          <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>
-            </template>
-          </el-image>
-          <!-- 如果允许视频，显示视频预览 -->
-          <video v-if="isAcceptVideo"
-                 :src="getShowValue(f)"
-                 controls></video>
-          <!-- 删除按钮，仅在未禁用状态下显示 -->
-          <div class="lw-upload__img-actions"
-               v-if="!disabled">
-            <span class="del"
-                  @click="handleRemove(index)">
-              <el-icon><el-icon-delete /></el-icon>
-            </span>
-          </div>
-        </div>
-      </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">
-        <slot>
-          <div class="el-upload--picture-card">
-            <div class="file-empty">
-              <el-icon>
-                <component :is="icon" />
-              </el-icon>
-              <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" />
-              <span v-if="file.percentage == 100">已上传，处理中···</span>
-            </div>
-          </div>
-        </slot>
-      </el-upload>
-    </div>
-
-    <!-- 上传提示信息 -->
-    <div v-if="tip"
-         class="el-upload__tip">
-      {{ tip }}
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'lwUpload',
-  /**
-   * @property {String} modelValue - 绑定的值，默认为空字符串
-   * @property {Number} height - 上传组件的高度，默认为 148
-   * @property {Number} width - 上传组件的宽度，默认为 148
-   * @property {String} title - 上传组件的标题，默认为空字符串
-   * @property {String} icon - 上传按钮的图标，默认为 'el-icon-plus'
-   * @property {String|Function} action - 上传的地址或函数，默认为空函数
-   * @property {Object} apiObj - API 对象配置，默认为空对象
-   * @property {String} name - 表单提交的文件字段名，默认为 'file'
-   * @property {Object} data - 上传时附带的额外参数，默认为空对象
-   * @property {String} accept - 允许上传的文件类型，默认为 'image/gif, image/jpeg, image/png'
-   * @property {Number} maxSize - 文件的最大大小，默认为 10MB
-   * @property {Number} limit - 允许上传的最大文件数，默认为 1
-   * @property {Boolean} autoUpload - 是否自动上传，默认为 true
-   * @property {Boolean} showFileList - 是否显示已上传文件列表，默认为 false
-   * @property {Boolean} disabled - 是否禁用上传功能，默认为 false
-   * @property {Boolean} round - 是否显示圆角按钮，默认为 false
-   * @property {Boolean} multiple - 是否多个文件，默认为 false
-   * @property {Array} returnFile - 需要返回的字段，例如为 ['url', 'type', 'name'] 第一个参数为图片地址
-   * @property {Function} onSuccess - 上传成功后的回调函数，默认为空函数
-   * @property {Function} parseData - 解析上传响应数据的函数，默认为解析状态码、文件名、图片远程地址和描述字段
-   */
-  props: {
-    modelValue: { type: [String, Array, Boolean, Object], default: "" },
-    height: { type: Number, default: 148 },
-    width: { type: Number, default: 148 },
-    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 },
-    showFileList: { type: Boolean, default: false },
-    multiple: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    round: { type: Boolean, default: false },
-    onSuccess: { type: Function, default: () => { return true } },
-    returnFile: { // 单传'url' 就返回数组 传对象映射关系就返回数组对象
-      type: [Object, String],
-      default: {
-        url: 'url', // 第一个就是默认图片字段
-        code: 'code',
-        fileName: 'fileName',
-        src: 'src',
-        type: 'type',
-        name: 'name',
-        size: 'size',
-        tempCropperFile: 'tempCropperFile',
-      }
-    },
-    parseData: {
-      type: Function, default: (res) => {
-        return {
-          code: 200,//分析状态字段结构
-          fileName: res.fileName,//分析文件名称
-          src: res.previewInfo.url,			//分析图片远程地址结构
-          msg: res.message			//分析描述字段结构
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      value: "",
-      file: null,
-      fileList: []
-    }
-  },
-  computed: {
-    // 计算上传组件的样式
-    style() {
-      return {
-        width: this.width + "px",
-        height: this.height + "px"
-      }
-    },
-    // 计算上传组件是否显示上传按钮
-    acceptedTypes() {
-      return this.accept.replace(/\s/g, "").split(",");
-    },
-    // 判断是否允许上传图片（判断字符串中是否包含 "image"）
-    isAcceptImage() {
-      return this.accept.indexOf('image') > -1;
-    },
-    // 判断是否允许上传视频（判断字符串中是否包含 "video"）
-    isAcceptVideo() {
-      return this.accept.indexOf('video') > -1;
-    }
-  },
-  watch: {
-    /**
-     * 监听外部绑定值的变化，更新内部值和文件列表
-     */
-    modelValue(val) {
-      this.value = val;
-      this.newFile(val);
-    },
-    /**
-     * 当内部值变化时，通过事件通知外部更新绑定值
-     */
-    value(val) {
-      this.$emit('update:modelValue', val);
-    }
-  },
-  mounted() {
-    // 初始化组件内部值和文件列表
-    this.value = this.modelValue;
-    this.newFile(this.modelValue);
-  },
-  methods: {
-    /**
-     * 根据传入的值初始化文件列表及当前文件
-     * @param {String|Array} url - 外部绑定的值
-     */
-    newFile(url) {
-      if (this.multiple) {
-        this.fileList = url || [];
-      } else {
-        this.fileList = url ? [url] : [];
-      }
-      this.file = url ? { status: "success", url: url } : null;
-    },
-    /**
-     * 删除指定索引的文件，并清理相关数据
-     * @param {Number} index - 要删除的文件索引
-     */
-    handleRemove(index) {
-      this.fileList.splice(index, 1);
-      this.clearFiles();
-    },
-    /**
-     * 清除当前文件及上传组件内部缓存的文件数据
-     */
-    clearFiles() {
-      if (this.file && this.file.tempFile) {
-        URL.revokeObjectURL(this.file.tempFile);
-      }
-      this.value = this.multiple ? this.fileList : "";
-      this.file = null;
-      this.$nextTick(() => {
-        this.$refs.uploader && this.$refs.uploader.clearFiles();
-      });
-    },
-    /**
-     * 上传文件状态变化时的回调函数
-     * @param {Object} file - 当前上传的文件对象
-     * @param {Array} files - 上传组件中所有文件的列表
-     * @returns {Boolean} 返回 false 可中断后续上传流程
-     */
-    change(file, files) {
-      if (!this.multiple && files.length > 1) {
-        files.splice(1);
-      }
-      const fileType = file.raw && file.raw.type;
-      if (file.status === 'ready' && fileType && !this.acceptedTypes.includes(fileType)) {
-        this.$notify.warning({
-          title: '上传文件警告',
-          message: '选择的文件类型不符合要求'
-        });
-        return false;
-      }
-      if (file.status === 'ready' && file.raw) {
-        file.tempFile = URL.createObjectURL(file.raw);
-      }
-      this.file = file;
-    },
-    /**
-     * 上传前的校验函数
-     * @param {Object} file - 待上传的文件对象
-     * @returns {Boolean} 返回 false 可阻止上传
-     */
-    before(file) {
-      // 校验文件类型是否符合允许列表
-      if (!this.acceptedTypes.includes(file.type)) {
-        this.$notify.warning({
-          title: '上传文件错误',
-          message: '选择的文件类型不正确'
-        });
-        this.clearFiles();
-        return false;
-      }
-      // 校验文件大小是否超出限制（单位：MB）
-      if (file.size / 1024 / 1024 > this.maxSize) {
-        this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
-        this.clearFiles();
-        return false;
-      }
-      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);
-    },
-    /**
-     * 上传成功的回调函数
-     * @param {Object} res - 上传接口返回的数据
-     * @param {Object} file - 上传成功的文件对象
-     */
-    success(res, file) {
-      file.type = file.raw.type;
-      if (file.tempFile) {
-        URL.revokeObjectURL(file.tempFile);
-      }
-      // 清理不必要的属性
-      delete file.tempFile;
-      delete file.percentage;
-      delete file.raw;
-      delete file.response;
-      delete file.uid;
-
-      const callbackResult = this.onSuccess(res, file);
-      if (callbackResult === false) {
-        this.$nextTick(() => {
-          this.file = null;
-          this.value = "";
-        });
-        return false;
-      }
-
-      // 解析上传接口返回的数据
-      const response = this.parseData(res);
-      file.url = response.src;
-
-      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];
-          }
-          return acc;
-        }, {});
-        this.fileList.push(mappedObject);
-      } else {
-        // 若 returnFile 为字符串，则直接返回对应字段的值
-        this.fileList.push(sourceObject[this.returnFile]);
-      }
-
-      // 更新绑定值：多文件上传返回数组，否则返回单个文件 URL
-      this.value = this.multiple ? this.fileList : file.url;
-    },
-    /**
-     * 上传失败的回调函数
-     * @param {Object} err - 错误信息
-     */
-    error(err) {
-      this.$nextTick(() => {
-        if (this.file) delete this.file.percentage;
-      });
-      this.$notify.error({
-        title: '上传文件失败',
-        message: err
-      });
-    },
-    /**
-     * 自定义上传请求方法，支持上传进度更新
-     * @param {Object} param - 上传请求的参数对象
-     */
-    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);
-      for (const key in param.data) {
-        data.append(key, param.data[key]);
-      }
-      apiObj(data, {
-        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)
-      })
-    },
-    /**
-     * 获取用于预览显示的文件 URL
-     * @param {Object|String} item - 文件信息对象或直接的 URL 字符串
-     * @returns {String} 返回预览所需的 URL 地址
-     */
-    getShowValue(item) {
-      if (this.multiple) {
-        if (typeof this.returnFile === 'object') {
-          const firstKey = Object.keys(this.returnFile)[0];
-          return item[this.returnFile[firstKey]];
-        } else {
-          return item;
-        }
-      } else {
-        return item;
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.el-form-item.is-error .lw-upload .el-upload--picture-card {
-  border-color: var(--el-color-danger);
-}
-
-.lw-upload {
-  width: 100%;
-
-  &.lw-upload-round {
-    border-radius: 50%;
-    overflow: hidden;
-
-    .el-upload--picture-card {
-      border-radius: 50%;
-    }
-
-    .lw-upload__img-actions {
-      top: auto;
-      left: 0;
-      right: 0;
-      bottom: 0;
-
-      span {
-        width: 100%;
-      }
-    }
-  }
-
-  .el-upload--picture-card {
-    border-radius: 0;
-    height: 100%;
-    width: 100%;
-    position: relative;
-  }
-
-  .uploader,
-  :deep(.el-upload) {
-    width: 100%;
-    height: 100%;
-  }
-
-  .file-empty {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-
-    i {
-      font-size: 28px;
-    }
-
-    h4 {
-      font-size: 12px;
-      font-weight: normal;
-      color: #8c939d;
-      margin-top: 8px;
-    }
-  }
-}
-
-.lw-upload__img {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .image {
-    width: 100%;
-    height: 100%;
-  }
-
-  video {
-    background-color: #000;
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-
-  &-actions {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: none;
-
-    span {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 25px;
-      height: 25px;
-      cursor: pointer;
-      color: #fff;
-
-      i {
-        font-size: 12px;
-      }
-
-      &.del {
-        background: #f56c6c;
-      }
-    }
-
-    &:hover {
-      display: block;
-    }
-  }
-
-  &-slot {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    font-size: 12px;
-    background-color: var(--el-fill-color-lighter);
-  }
-
-  &-uploading .image {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.lw-upload__progress {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  background-color: rgba(#000, 0.4);
-  backdrop-filter: blur(10px);
-  z-index: 1;
-  padding: 10px;
-
-  .el-progress {
-    width: 100%;
-  }
-  span {
-    font-size: 12px;
-  }
-}
-
-.view-img-list {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 10px;
-  &:hover {
-    .lw-upload__img-actions {
-      display: block;
-    }
-  }
-}
-</style>