element-ui使用el-upload,before-upload函数不好使问题怎么解决

这篇文章主要介绍了element-ui使用el-upload,before-upload函数不好使问题怎么解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇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	是否在选取文件后立即进行上传	boolean	—	true

这里有个地方需要注意：
 

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 >反馈数据导入
            <span >*</span>：
        </span>
        <el-button
            slot="trigger"
            size="small"
            type="primary"
            
        >
            浏览
        </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
    },

关于“element-ui使用el-upload,before-upload函数不好使问题怎么解决”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“element-ui使用el-upload,before-upload函数不好使问题怎么解决”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注本站行业资讯频道。