图片上传组件新增disabled属性

RuoYi

2025-05-06 056cf940822ba60875c5cb2cfdc05dc9df847131

 ruoyi-ui/src/components/FileUpload/index.vue

@@ -1,17 +1,20 @@
<template>

  <div class="upload-file">

    <el-upload

      multiple

      :action="uploadFileUrl"

      :before-upload="handleBeforeUpload"

      :file-list="fileList"

      :limit="1"

      :data="data"

      :limit="limit"

      :on-error="handleUploadError"

      :on-exceed="handleExceed"

      :on-success="handleUploadSuccess"

      :show-file-list="false"

      :headers="headers"

      class="upload-file-uploader"

      ref="upload"

      ref="fileUpload"

      v-if="!disabled"

    >

      <!-- 上传按钮 -->

      <el-button size="mini" type="primary">选取文件</el-button>

@@ -25,13 +28,13 @@
    </el-upload>



    <!-- 文件列表 -->

    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">

      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list">

    <transition-group ref="uploadFileList" class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">

      <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">

        <el-link :href="file.url" :underline="false" target="_blank">

          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>

        </el-link>

        <div class="ele-upload-list__item-content-action">

          <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>

          <el-link :underline="false" @click="handleDelete(index)" type="danger" v-if="!disabled">删除</el-link>

        </div>

      </li>

    </transition-group>

@@ -39,59 +42,108 @@
</template>



<script>

import { getToken } from "@/utils/auth";

import { getToken } from "@/utils/auth"

import Sortable from 'sortablejs'



export default {

  name: "FileUpload",

  props: {

    // 值

    value: [String, Object, Array],

    // 上传接口地址

    action: {

      type: String,

      default: "/file/upload"

    },

    // 上传携带的参数

    data: {

      type: Object

    },

    // 数量限制

    limit: {

      type: Number,

      default: 5

    },

    // 大小限制(MB)

    fileSize: {

      type: Number,

      default: 5,

      default: 5

    },

    // 文件类型, 例如['png', 'jpg', 'jpeg']

    fileType: {

      type: Array,

      default: () => ["doc", "xls", "ppt", "txt", "pdf"],

      default: () => ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "pdf"]

    },

    // 是否显示提示

    isShowTip: {

      type: Boolean,

      default: true

    },

    // 禁用组件（仅查看文件）

    disabled: {

      type: Boolean,

      default: false

    },

    // 拖动排序

    drag: {

      type: Boolean,

      default: true

    }

  },

  data() {

    return {

      uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址

      number: 0,

      uploadList: [],

      uploadFileUrl: process.env.VUE_APP_BASE_API + this.action, // 上传文件服务器地址

      headers: {

        Authorization: "Bearer " + getToken(),

      },

      fileList: [],

    };

      fileList: []

    }

  },

  mounted() {

    if (this.drag && !this.disabled) {

      this.$nextTick(() => {

        const element = this.$refs.uploadFileList?.$el || this.$refs.uploadFileList

        Sortable.create(element, {

          ghostClass: 'file-upload-darg',

          onEnd: (evt) => {

            const movedItem = this.fileList.splice(evt.oldIndex, 1)[0]

            this.fileList.splice(evt.newIndex, 0, movedItem)

            this.$emit("input", this.listToString(this.fileList))

          }

        })

      })

    }

  },

  watch: {

    value: {

      handler(val) {

        if (val) {

          let temp = 1

          // 首先将值转为数组

          const list = Array.isArray(val) ? val : this.value.split(',')

          // 然后将数组转为对象数组

          this.fileList = list.map(item => {

            if (typeof item === "string") {

              item = { name: item, url: item }

            }

            item.uid = item.uid || new Date().getTime() + temp++

            return item

          })

        } else {

          this.fileList = []

          return []

        }

      },

      deep: true,

      immediate: true

    }

  },

  computed: {

    // 是否显示提示

    showTip() {

      return this.isShowTip && (this.fileType || this.fileSize);

    },

    // 列表

    list() {

      let temp = 1;

      if (this.value) {

        // 首先将值转为数组

        const list = Array.isArray(this.value) ? this.value : [this.value];

        // 然后将数组转为对象数组

        return list.map((item) => {

          if (typeof item === "string") {

            item = { name: item, url: item };

          }

          item.uid = item.uid || new Date().getTime() + temp++;

          return item;

        });

      } else {

        return [];

      }

      return this.isShowTip && (this.fileType || this.fileSize)

    },

  },

  methods: {

@@ -99,64 +151,95 @@
    handleBeforeUpload(file) {

      // 校检文件类型

      if (this.fileType) {

        let fileExtension = "";

        if (file.name.lastIndexOf(".") > -1) {

          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);

        }

        const isTypeOk = this.fileType.some((type) => {

          if (file.type.indexOf(type) > -1) return true;

          if (fileExtension && fileExtension.indexOf(type) > -1) return true;

          return false;

        });

        const fileName = file.name.split('.')

        const fileExt = fileName[fileName.length - 1]

        const isTypeOk = this.fileType.indexOf(fileExt) >= 0

        if (!isTypeOk) {

          this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);

          return false;

          this.$modal.msgError(`文件格式不正确，请上传${this.fileType.join("/")}格式文件!`)

          return false

        }

      }

      // 校检文件名是否包含特殊字符

      if (file.name.includes(',')) {

        this.$modal.msgError('文件名不正确，不能包含英文逗号!')

        return false

      }

      // 校检文件大小

      if (this.fileSize) {

        const isLt = file.size / 1024 / 1024 < this.fileSize;

        const isLt = file.size / 1024 / 1024 < this.fileSize

        if (!isLt) {

          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);

          return false;

          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`)

          return false

        }

      }

      return true;

      this.$modal.loading("正在上传文件，请稍候...")

      this.number++

      return true

    },

    // 文件个数超出

    handleExceed() {

      this.$message.error(`只允许上传单个文件`);

      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`)

    },

    // 上传失败

    handleUploadError(err) {

      this.$message.error("上传失败, 请重试");

      this.$modal.msgError("上传文件失败，请重试")

      this.$modal.closeLoading()

    },

    // 上传成功回调

    handleUploadSuccess(res, file) {

      this.$message.success("上传成功");

      this.$emit("input", res.data.url);

      if (res.code === 200) {

        this.uploadList.push({ name: res.data.url, url: res.data.url })

        this.uploadedSuccessfully()

      } else {

        this.number--

        this.$modal.closeLoading()

        this.$modal.msgError(res.msg)

        this.$refs.fileUpload.handleRemove(file)

        this.uploadedSuccessfully()

      }

    },

    // 删除文件

    handleDelete(index) {

      this.fileList.splice(index, 1);

      this.$emit("input", '');

      this.fileList.splice(index, 1)

      this.$emit("input", this.listToString(this.fileList))

    },

    // 上传结束处理

    uploadedSuccessfully() {

      if (this.number > 0 && this.uploadList.length === this.number) {

        this.fileList = this.fileList.concat(this.uploadList)

        this.uploadList = []

        this.number = 0

        this.$emit("input", this.listToString(this.fileList))

        this.$modal.closeLoading()

      }

    },

    // 获取文件名称

    getFileName(name) {

      // 如果是url那么取最后的名字 如果不是直接返回

      if (name.lastIndexOf("/") > -1) {

        return name.slice(name.lastIndexOf("/") + 1).toLowerCase();

        return name.slice(name.lastIndexOf("/") + 1)

      } else {

        return "";

        return name

      }

    },

    // 对象转成指定字符串分隔

    listToString(list, separator) {

      let strs = ""

      separator = separator || ","

      for (let i in list) {

        strs += list[i].url + separator

      }

      return strs != '' ? strs.substr(0, strs.length - 1) : ''

    }

  },

  created() {

    this.fileList = this.list;

  },

};

  }

}

</script>



<style scoped lang="scss">

.file-upload-darg {

  opacity: 0.5;

  background: #c8ebfb;

}

.upload-file-uploader {

  margin-bottom: 5px;

}