小白也能轻松掌握，一次请求上传多个图片到服务器的秘诀

2023-01-31 20:29:11

二次封装 Element UI 的 el-upload 组件，实现图片上传

在实际开发中，图片上传是一个常见的需求。传统的做法是使用 <form> 表单提交，但这比较麻烦且效率低下。Element UI 提供了 el-upload 组件，可以方便地实现图片上传。不过，为了满足特定业务需求，我们通常需要对 el-upload 组件进行二次封装。

二次封装 el-upload

二次封装 el-upload 组件的目的是将其上传功能与业务逻辑结合起来。例如，我们可以将上传的文件保存到指定的服务器目录，或将文件信息存储到数据库。

实现一次请求多个上传

在某些情况下，我们需要一次性上传多个文件。我们可以通过将 el-upload 组件的 multiple 属性设置为 true 来实现此功能。这样，用户可以选择多个文件，然后使用 el-upload 的 submit 方法提交表单，组件会自动将选中的文件上传到服务器。

示例代码

import { ElUpload } from 'element-ui';

Vue.component('el-upload', ElUpload);

export default {
  name: 'MyUpload',
  props: {
    action: { type: String, required: true },
    data: { type: Object, default: () => ({}) },
    accept: { type: String, default: '' },
    multiple: { type: Boolean, default: false },
    sizeLimit: { type: Number, default: 1024 * 1024 * 2 },
    limit: { type: Number, default: 10 },
    beforeUpload: { type: Function, default: () => {} },
    onSuccess: { type: Function, default: () => {} },
    onError: { type: Function, default: () => {} },
  },
  methods: {
    submit() {
      this.$refs.upload.submit();
    },
    reset() {
      this.$refs.upload.reset();
    },
  },
  render() {
    return (
      <el-upload
        ref="upload"
        action={this.action}
        data={this.data}
        accept={this.accept}
        multiple={this.multiple}
        size-limit={this.sizeLimit}
        limit={this.limit}
        before-upload={this.beforeUpload}
        on-success={this.onSuccess}
        on-error={this.onError}
      >
        <el-button type="primary">上传</el-button>
      </el-upload>
    );
  },
};