修复上传组件被多次引用拖动仅对第一个有效的问题

RuoYi

2025-05-06 07be5ceb2633279787380dfda88602f208a8e020

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

@@ -28,7 +28,7 @@
    </el-upload>



    <!-- 文件列表 -->

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

    <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>

@@ -42,7 +42,8 @@
</template>



<script>

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

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

import Sortable from 'sortablejs'



export default {

  name: "FileUpload",

@@ -82,6 +83,11 @@
    disabled: {

      type: Boolean,

      default: false

    },

      // 拖动排序

    drag: {

      type: Boolean,

      default: true

    }

  },

  data() {

@@ -92,27 +98,42 @@
      headers: {

        Authorization: "Bearer " + getToken(),

      },

      fileList: [],

    };

      fileList: []

    }

  },

  mounted() {

    if (this.drag) {

      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;

          let temp = 1

          // 首先将值转为数组

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

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

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

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

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

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

              item = { name: item, url: item }

            }

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

            return item;

          });

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

            return item

          })

        } else {

          this.fileList = [];

          return [];

          this.fileList = []

          return []

        }

      },

      deep: true,

@@ -122,7 +143,7 @@
  computed: {

    // 是否显示提示

    showTip() {

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

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

    },

  },

  methods: {

@@ -130,91 +151,95 @@
    handleBeforeUpload(file) {

      // 校检文件类型

      if (this.fileType) {

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

        const fileExt = fileName[fileName.length - 1];

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

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

        const fileExt = fileName[fileName.length - 1]

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

        if (!isTypeOk) {

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

          return false;

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

          return false

        }

      }

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

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

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

        return false;

        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.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);

          return false;

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

          return false

        }

      }

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

      this.number++;

      return true;

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

      this.number++

      return true

    },

    // 文件个数超出

    handleExceed() {

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

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

    },

    // 上传失败

    handleUploadError(err) {

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

      this.$modal.closeLoading();

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

      this.$modal.closeLoading()

    },

    // 上传成功回调

    handleUploadSuccess(res, file) {

      if (res.code === 200) {

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

        this.uploadedSuccessfully();

        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();

        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.listToString(this.fileList));

      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();

        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);

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

      } else {

        return name;

        return name

      }

    },

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

    listToString(list, separator) {

      let strs = "";

      separator = separator || ",";

      let strs = ""

      separator = separator || ","

      for (let i in list) {

        strs += list[i].url + separator;

        strs += list[i].url + separator

      }

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

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

    }

  }

};

}

</script>



<style scoped lang="scss">

.file-upload-darg {

  opacity: 0.5;

  background: #c8ebfb;

}

.upload-file-uploader {

  margin-bottom: 5px;

}