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

目录

• element-ui使用el-upload,before-upload函数不好使
• 解决方式
• ElementUI 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 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
    },

总结

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

原文地址：https://blog.csdn.net/qq_38998250/article/details/121075056