arco design vue封装图片上传

Arco Design Vue提供了一个名为`ArcoUpload`的组件来封装图片上传的功能。以下是使用步骤：

1. 安装Arco Design Vue

npm install @arco-design/web-vue

2. 引入ArcoUpload组件

import { ArcoUpload } from '@arco-design/web-vue';

3. 在模板中使用ArcoUpload组件

<template>
  <arco-upload
    action="/api/upload"
    :before-upload="handleBeforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
    :on-remove="handleRemove"
    :max-file-count="3"
    :max-file-size="5 * 1024 * 1024"
    :file-list.sync="fileList"
    multiple
    drag
    accept="image/*"
  >
    <template #trigger>
      <arco-button>上传图片</arco-button>
    </template>
  </arco-upload>
</template>

4. 设置ArcoUpload组件的属性和事件处理函数

- `action`：上传图片的接口地址
- `before-upload`：上传图片前的校验函数，返回false则取消上传
- `on-success`：上传成功的回调函数
- `on-error`：上传失败的回调函数
- `on-remove`：删除已上传图片的回调函数
- `max-file-count`：最大上传图片数量
- `max-file-size`：最大上传图片大小
- `file-list.sync`：已上传图片列表，需要使用`.sync`修饰符实现双向绑定
- `multiple`：是否支持多选
- `drag`：是否支持拖拽上传
- `accept`：限制上传文件类型

5. 处理上传相关的函数

export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handleBeforeUpload(file) {
      console.log('before upload:', file);
      return true;
    },
    handleSuccess(response, file) {
      console.log('upload success:', response, file);
    },
    handleError(error, file) {
      console.log('upload error:', error, file);
    },
    handleRemove(file) {
      console.log('remove file:', file);
    },
  },
};

以上就是使用Arco Design Vue封装图片上传的步骤和代码示例。