解读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
    },

总结

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

相关文章

  • Vue3中引入Pinia存储库使用示例详解

    Vue3中引入Pinia存储库使用示例详解

    这篇文章主要介绍了Vue3中引入Pinia存储库使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • element table 表格控件实现单选功能

    element table 表格控件实现单选功能

    本文主要介绍了element table 表格控件实现单选功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • vue 插件的方法代码详解

    vue 插件的方法代码详解

    在开发项目的时候,我们一般都用 vue-cli 来避免繁琐的 webpack 配置和 template 配置。这篇文章主要介绍了如何写一个 vue 插件,需要的朋友可以参考下
    2019-06-06
  • 关于vue 结合原生js 解决echarts resize问题

    关于vue 结合原生js 解决echarts resize问题

    这篇文章主要介绍了关于vue 结合原生js 解决echarts resize问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue打包上线之后部分CSS不生效问题的解决办法

    Vue打包上线之后部分CSS不生效问题的解决办法

    在vue项目中开发环境的样式没问题,但是打包上线后,样式不生效,下面这篇文章主要给大家介绍了关于Vue打包上线之后部分CSS不生效问题的解决办法,需要的朋友可以参考下
    2022-12-12
  • Vue自定义元素身上的右键事件问题

    Vue自定义元素身上的右键事件问题

    这篇文章主要介绍了Vue自定义元素身上的右键事件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Element table 上下移需求的实现

    Element table 上下移需求的实现

    本文主要介绍了Element table 上下移需求的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • 详解Element-UI中上传的文件前端处理

    详解Element-UI中上传的文件前端处理

    这篇文章主要介绍了详解Element-UI中上传的文件前端处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue单选按钮,选中如何改变其当前按钮颜色

    vue单选按钮,选中如何改变其当前按钮颜色

    这篇文章主要介绍了vue单选按钮,选中如何改变其当前按钮颜色。具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • 详解vite2.0配置学习(typescript版本)

    详解vite2.0配置学习(typescript版本)

    这篇文章主要介绍了详解vite2.0配置学习(typescript版本),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02

最新评论