vue中el-upload组件如何实现非空校验

在el-upload组件的属性中添加:before-upload方法，该方法会在上传文件之前执行，可以在该方法中通过返回false来取消上传。可以利用该方法进行非空校验，具体实现方式如下：

<el-upload
action="/upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="beforeUpload"
>
<el-button slot="trigger" type="primary">上传文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

methods: {
beforeUpload(file) {
if (!file) {
this.$message({
type: 'error',
message: '请选择文件'
})
return false
}
return true
},
handlePreview(file) {
console.log('preview', file)
},
handleRemove(file, fileList) {
console.log('remove', file, fileList)
}
}

相关问题

vue element el-upload

vue element el-upload 是 Vue 开发中常用的一个功能，它是 Element 组件库提供的上传组件。el-upload 组件有多种用法和配置选项，可以根据需要进行设置和使用。例如，可以通过指定 action 属性来设置上传文件的接口地址，通过设置 accept 属性来限制上传的文件类型，通过设置 multiple 属性来实现多文件上传等。同时，el-upload 组件还提供了一些事件和方法，可以方便地处理上传过程中的各种情况，例如上传成功、上传失败、上传前的校验等。

在基本用法中，可以将 el-button 放在 el-upload 组件内部，通过点击按钮来触发上传操作。在上传过程中，可以展示已上传的文件列表，并且可以方便地删除已上传的文件，以便上传新的文件。

在需要同时提交数据给后台接口的情况下，可以使用 data 属性来传递额外的数据。通过设置 before-upload 属性，可以在上传之前进行一些操作，例如对上传文件进行限制或校验。同时，可以通过设置 on-success 和 on-error 属性来处理上传成功和上传失败的情况。

总的来说，vue element el-upload 是一个功能强大且易于使用的上传组件，可以满足大部分前端开发中的文件上传需求。

vue3 el-upload上传多张图片

以下是使用Vue3的el-upload组件上传多张图片的示例代码：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    multiple
    :limit="3"
    :auto-upload="false"
    :file-list="fileList"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const fileList = ref([]);

    const beforeUpload = (file) => {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500K = file.size / 1024 < 500;

      if (!isJPG) {
        this.$message.error('只能上传jpg/png文件');
      }
      if (!isLt500K) {
        this.$message.error('文件大小不能超过500kb');
      }

      return isJPG && isLt500K;
    };

    const handleSuccess = (response, file) => {
      this.$message.success('上传成功');      // 处理上传成功后的逻辑
    };

    return {
      fileList,
      beforeUpload,
      handleSuccess,
    };
  },
};
</script>

在上述代码中，我们使用了Vue3的`ref`函数来创建了一个响应式的`fileList`数组，于存储上传的文件列表。`beforeUpload`函数用于在上传之前进行文件类型和大小的校验，只有符合要求的文件才会被上传。`handleSuccess`函数用于处理上传成功后的逻辑，你可以在其中进行图片压缩和合并为zip文件的操作。

请注意，上述代码中的`action`属性需要根据你的实际情况进行修改，以指定上传文件的接口地址。