使用Vue.extend实现iview Upload在单文件上传时，拖拽多个文件给出错误提示

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1. 扩展Select组件，注册新的组件（global-components.js文件中进行）

import Vue from 'vue';
import { Upload } from 'view-design';
// 扩展组件
// 拖拽文件上传时检测文件个数（单文件上传，拖拽大于一个报错）
const MyUpload = Vue.extend(Upload).extend({
  methods: {
    onDrop(e) {
      this.dragOver = false;
      if (this.itemDisabled) { return; }
      /* -- 新加 -- */
      if (!this.multiple && e.dataTransfer.files.length > 1) {
        this.$emit('onFileNumberError');
        return;
      } 
      /* -- end -- */
      this.uploadFiles(e.dataTransfer.files);
    },
  },
});
// 注册全局组件
Vue.component('my-upload', MyUpload);

2. main.js中引入上个文件

import "@/components/global-components";
···

3. 使用

<template>
      <my-upload @onFileNumberError="onFileNumberError">
      </my-upload>
</template>
<script>
export default {
      methods: {
            onFileNumberError() { this.$Message.error('一次只能上传单个文件') }
      }
}
</script>

用法和原Upload一样，只是多了onFileNumberError用于拖拽多个时报错

以上是 使用Vue.extend实现iview Upload在单文件上传时，拖拽多个文件给出错误提示 的全部内容， 来源链接： utcz.com/z/380593.html

回到顶部