解读element-ui使用el-upload,before-upload函数不好使的问题

 更新时间:2023年03月28日 09:46:25   作者:拿回忆下酒  
这篇文章主要介绍了解读element-ui使用el-upload,before-upload函数不好使的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

element-ui使用el-upload,before-upload函数不好使

在使用el-upload这个组件的时候,业务是需要传其他参数给后台,所以校验写在before-upload中,在before-upload中直接返回true或者是false依然会发文件给后台

参数说明类型可选值默认值
on-progress文件上传时的钩子function(event, file, fileList) — —
on-change文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用function(file, fileList)
before-upload上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。function(file)
auto-upload是否在选取文件后立即进行上传booleantrue

这里有个地方需要注意:

before-upload 是上传前的校验,因此auto-upload必须为true

解决方式

我这里是采用在函数中返回一个promise来解决的:

<template>
	<el-upload
	  class="avatar-uploader"
	  action="https://xxx.xxx.com/xxx/xxx"
	  :show-file-list="false"
	  :on-success="handleAvatarSuccess"
	  :before-upload="beforeAvatarUpload">
	  <img v-if="imageUrl" :src="imageUrl" class="avatar">
	  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
	</el-upload>
</template>
<script>
export default {
	data() {
      return {
        imageUrl: ''
      };
    },
	methods: {
		beforeAvatarUpload (file) {
	      return new Promise(async (resolve, reject) => {
	      	// 失败
	        if ('xxx' !=0) {
	          reject()
	        } else {
	        	// 成功
	        	resolve()
			}
	      })
	    },
	    handleAvatarSuccess(res, file) {
	        this.imageUrl = URL.createObjectURL(file.raw);
	    }
	 }
 }
 </script>

ElementUI el-upload上传图片限制,before-upload不生效

因为 before-upload 是指在文件上传之前、文件已被选中,但还没上传的时候触发,而设置了 :auto-upload=“false” 后,文件上传事件不被再次调用,所以 before-upload 不生效,所以,限制图片大小和格式的时候,需绑定在 :on-change 里面

     <el-upload
         class="upload-demo uploadTwo"
         ref="fileUploadRef"
         :action="fileUrl + 'order/mdm/partpredictioncoord/import'"
         :file-list="fileUploadList"
         :auto-upload="false"
         :headers="header"
         name="uploadFile"
         :limit="1" multiple
         :on-change="beforeFeedBackExport"
         :on-success="fileUploadSuccess">
        <span style="float: left; line-height: 32px; padding-right: 10px">反馈数据导入
            <span style="color:red">*</span>:
        </span>
        <el-button
            slot="trigger"
            size="small"
            type="primary"
            style="float: right;"
        >
            浏览
        </el-button>
     </el-upload>
 // 反馈数据导出
    beforeFeedBackExport(file) {

      // this.tableFileName = file.name;


      let testFile = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase()

      const extension = testFile === 'xlsx' || testFile === 'xls';

      const isLt2M = (file.size / 1024 / 1024 < 10);
      if (!extension) {
        this.$message({
          message: '上传文件只能是xls/xlsx!',
          type: 'warning'
        });
        this.fileUploadList = []
        return false;
      }
      if (!isLt2M) {
        this.$message({
          message: "文件大小不可以超过10M",
          type: 'warning'
        });
        this.fileUploadList = []
        return false;
      }
      return (extension) && isLt2M
    },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • dataV大屏在vue中的使用方式

    dataV大屏在vue中的使用方式

    这篇文章主要介绍了dataV大屏在vue中的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue.js响应式数据的简单实现方法(一看就会)

    Vue.js响应式数据的简单实现方法(一看就会)

    Vue最巧妙的特性之一是其响应式系统,下面这篇文章主要给大家介绍了关于Vue.js响应式数据的简单实现方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • 使用vue重构资讯页面的实例代码解析

    使用vue重构资讯页面的实例代码解析

    这篇文章主要介绍了使用vue重构资讯页面的实例代码解析,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • Vue父子传递实例讲解

    Vue父子传递实例讲解

    在本篇文章里小编给大家整理的是关于Vue父子传递实例讲解,需要的朋友们可以跟着学习参考下。
    2020-02-02
  • 如何用Vite构建工具快速创建Vue项目

    如何用Vite构建工具快速创建Vue项目

    Vite是一个web开发构建工具,由于其原生 ES 模块导入方法,它允许快速提供代码,下面这篇文章主要给大家介绍了关于如何用Vite构建工具快速创建Vue项目的相关资料,需要的朋友可以参考下
    2022-05-05
  • .vue文件 加scoped 样式不起作用的解决方法

    .vue文件 加scoped 样式不起作用的解决方法

    本篇文章主要介绍了.vue文件 加scoped 样式不起作用的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 关于Vue ui 的没反应、报错问题解决总结

    关于Vue ui 的没反应、报错问题解决总结

    这篇文章主要介绍了关于Vue ui 的没反应、报错问题解决总结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue3.0 setup中使用vue-router问题

    vue3.0 setup中使用vue-router问题

    这篇文章主要介绍了vue3.0 setup中使用vue-router问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue+Flask实现简单的登录验证跳转的示例代码

    Vue+Flask实现简单的登录验证跳转的示例代码

    本篇文章主要介绍了Vue+Flask实现简单的登录验证跳转的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue项目中使用bpmn为节点添加颜色的方法

    vue项目中使用bpmn为节点添加颜色的方法

    这篇文章主要介绍了vue项目中使用bpmn为节点添加颜色的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04

最新评论