element 上传组件不立即上传如何判断文件类型(auto-upload=‘false‘),accept不能完全限制上传文件格式

问题

accept不能完全限制上传文件格式

使用accept虽然可以在拖拽上传时避免传入其他文件,但是使用点击上传时无法做到完全过滤。
点击全部就可以对所有类型文件进行上传!

accept不能完全限制上传文件格式

如图,选择所有文件就可以对所有格式的文件进行上传!

auto-upload='false’时不能使用before-upload钩子

auto-upload='false'时不能使用before-upload钩子
auto-upload='false'时不能使用before-upload钩子

实现代码

组件代码

	<el-upload
        drag
        action="/"
        accept=".txt"
        :auto-upload="false"
        :file-list="fileList"
        :on-change="onChangeFile"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">.txt格式的文件拖到此处,或<em>点击上传</em>
        </div>
      </el-upload>

方法代码

	// 判断文件类型方法
	onChangeFile(file, fileList) {
      if (file.name.split('.').pop() !== 'txt' && file.name.split('.').pop() !== 'TXT') { // 类型有可能大写,记得要写
        fileList = []
        this.fileList = []
	    this.$message({
	      message: '请上传.txt格式的文件',
	      type: 'error'
	    })
      } else {
        this.fileList = fileList.length > 0 ? [file.raw] : []
      }
    },
    // 上传方法
   	async onSubmit() {
        const formData = new FormData()
        formData.append('file', this.fileList[0])
        const res = await this.$api.xxxx.xxxx(formData) //后端接口
    },

GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 8 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 8 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐