avue-crud 多文件上传

Avue-Crud是一个基于Vue.js的轻量级表格操作组件库，它提供了一个简单易用的界面，用于数据增删改查（CRUD）操作。对于多文件上传功能，Avue-Crud内置了支持文件上传的功能，通常通过HTML的`<input type="file">`元素配合Vue的事件处理机制，以及使用插件如Element Plus或IcoMoon等的`el-upload`组件来实现。

在Avue-Crud中，你可以这样配置多文件上传：

1. 首先，在组件的模板中添加一个或多组`el-upload`元素：

<template>
  <el-form-item label="多文件上传">
    <el-upload
      :action="uploadUrl"
      :multiple="true"
      :on-change="handleChange"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-error="handleError"
    >
      <el-button>点击选择文件</el-button>
      <el-button slot="tip" disabled>已经选择了{{ files.length }}个文件</el-button>
    </el-upload>
  </el-form-item>
</template>

2. 在组件的script部分定义相关的Vue方法：

<script>
export default {
  data() {
    return {
      files: [],
      uploadUrl: 'your-upload-url', // 你的后端接口URL
    };
  },
  methods: {
    handleChange(file) {
      this.files.push(file);
    },
    beforeUpload(file) {
      // 这里可以进行文件类型、大小等验证
      return true;
    },
    handleSuccess(response, file) {
      // 文件上传成功后的处理
    },
    handleError(error, file) {
      // 文件上传失败后的处理
    },
  },
};
</script>