Ant Design Pro of Vue2 文件上传组件 Upload 自定义上传实战笔记

确认 Ant Design Vue 版本

• 首先要清楚 Ant Design Vue 和 Ant Design Pro of Vue 的区别：
  可以理解为 Ant Design Vue 是一套 Vue 组件库，而 Pro 是使用了这套组件库的完整前端脚手架。

• 从 Ant Design Pro of Vue 构建的项目的 package-lock.json 文件中确认
  

  截止本文发布时间（2022 年 9 月 16 日）按照 Pro 官方文档的安装方式默认安装都是 1.7.8 的版本。

• 明确了框架的版本，那么我们在阅读官方文档使用 upload 或者其他组件时，也一定要确认文档版本，否则会因为版本差异，会影响您的工作。
  

  上图中选择 1.x 就是 1.7.8 的版本，选择之后就会显示完整的版本号 1.7.8 。

【特别说明】为什么要讲上面这些呢，因为我在实际工作中就因为这个问题，官方文档默认打开的版本是 v3 或者 v2，再加上当时项目比较赶，就掉到这坑里了！！！

Upload 组件 API 关键参数和事件介绍

参数

• action：设置上传地址，可以设置两种类型的值：

  • 字符串：就是一个有效的上传 URL 地址；
  • 回调函数：(file) => Promise （这个后续探索后，再给大家分享^_^）

• method：设置上传请求方式，一般为 POST

• beforeUpload：上传文件之前的钩子，参数为上传的文件

• customRequest：通过覆盖默认的上传行为，可以自定义自己的上传实现，该参数的值类型为Function

• data：设置上传所需参数，如：{type: 'article'}

• fileList：已经上传的文件列表（受控）

• listType：上传列表的内建样式，支持三种基本样式 text, picture 和 picture-card

• multiple：是否支持多选文件，ie10+ 支持。开启后按住 ctrl 可选择多个文件。

• name：设置发到后台的文件参数名，默认 file

• remove:点击移除文件时的回调，返回值为 false 时不移除。Function(file): boolean

事件

• change：上传文件状态改变时的回调，上传中、完成、失败都会调用这个函数。返回三个参数：

  • file 当前操作的文件对象，数据结构为：

    {
        uid: 'uid',      // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
        name: 'xx.png',   // 文件名
        status: 'done', // 状态有：uploading done error removed
        response: '{"status": "success"}', // 服务端响应内容
        linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性
        xhr: 'XMLHttpRequest{ ... }', // XMLHttpRequest Header
    }
    

  • fileList 当前的文件列表。

  • event 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。

• preview：点击文件链接或预览图标时的回调，返回参数点击的文件对象。

• reject：拖拽文件不符合 accept 类型时的回调

Upload 组件代码实战

基础代码构建

<template>
  <div>
    <a-card title="多图上传">
      <!-- 引入 Upload 上传组件 -->
      <a-upload list-type="picture-card">
        <div>
          <a-icon type="plus" />
        </div>
      </a-upload>
    </a-card>
  </div>
</template>

<script>
export default {
   
   
  data() {
   
   
    return {
   
   };
  },
  methods: {
   
   },
};
</script>

此时效果图如下，但是还不能成功上传文件，因为我们还没有做服务端上传相关配置。

自定义上传实现（customRequest）

通过给 upload 组件设置 customRequest 参数来实现自定义上传，设置该从参数会覆盖组件的默认上传行为。

此时 upload 组件代码如下：

<a-upload
  list-type="picture-card"
  :custom-request="customUploadHandle"  // 设置 custom-request 参数
></a-upload>

JS 部分增加自定义上传的实现，代码如下：

// 引用定义好的上传API
import {
   
    uploadFile } from '@/api/common';

// 在 methods 增加自定义的实现，就是一个函数回调
// 函数有一个参数 data ，就是打开文件选择器选择的文件对象
methods: {
   
   
  customUploadHandle(data) {
   
   
    // 构建表单上传对象
    const formData = new FormData();
    // 上传的文件，就是我们熟悉的HTML表单的input[type=file]的值
    formData.append("file", data.file);
    // 设置其他（表单）参数，你可以添加多个该行代码表示增加多个参数，本例参数type=covers代表我上传的是封面图片
    formData.append("type", "covers");
    // 请求上传API
    uploadFile(formData)
      .then((res) => {
   
   
        this.uploadLoading = false;
        if (res.code * 1 === 0) {
   
   
          // 上传成功的回调
          data.onSuccess(res.data);
        } else {
   
   
          // 上传失败的回调
          data.onError(res.msg);
          this.$message.error(res.msg);
        }
      })
      .catch((error) => {
   
   
        this.uploadLoading = false;
        this.$message.error(error.message);
      });
  }
}

文件验证（类型、大小）

在 beforeUpload 参数（上传前的钩子）中进行文件类型、大小进行判断，如果不满足条件，返回 false 则停止上传。

<a-upload
  list-type="picture-card"
  :custom-request="customUploadHandle"
  :before-upload="beforeUploadHandle"  // 设置 before-upload 参数
></a-upload>

JS 部分增加 beforeUpload 的实现，代码如下：

// 在 methods 增加 beforeUpload 的实现，就是一个函数回调
// 函数有两个参数：file为当前已选择待上传的文件， fileList为已经选择上传的文件列表
methods: {
   
   
  beforeUploadHandle (file, fileList) {
   
   
    // 检查文件 file 的大小和类型，
    // result 为验证果 true or false，messages 为验证失败时的错误消息
    const {
   
    result, messages } = fileCheckForImage(file)
    if (!result) {
   
    // 验证失败的处理
      fileList.pop() // 从已选择的文件列表移除最后一个文件，也就是当前验证的文件，因为默认会显示
      this.$message.error(messages) // 弹出验证失败的提示信息
      return false // 返回 false 阻止上传
    }
  }
}

// 文件大小和类型验证的实现，我把该函数放到了公共函数文件，你可以根据实际情况来处理
export function fileCheckForImage (file) {
   
   
  const messages = [