上传
- 何时使用
- 代码演示
  - 点击上传
  - 用户头像
  - 已上传的文件列表
  - 照片墙
  - 完全控制的上传列表
  - 拖拽上传
  - 图片列表样式
  - 手动上传
  - 文件夹上传
API
- 事件
- change

上传

上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。

何时使用

当需要上传一个或一些文件时。
当需要展现上传的进度时。
当需要使用拖拽交互时。

代码演示

Upload上传 - 图1

点击上传

经典款式，用户点击按钮弹出文件选择框。

<template>
  <a-upload name="file" :multiple="true" action="//jsonplaceholder.typicode.com/posts/" :headers="headers" @change="handleChange">
    <a-button>
      <a-icon type="upload" /> Click to Upload
    </a-button>
  </a-upload>
</template>
<script>
export default {
  data () {
    return {
      headers: {
        authorization: 'authorization-text',
      }
    }
  },
  methods: {
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
  },
}
</script>

Upload上传 - 图2

用户头像

点击上传用户头像，并使用 beforeUpload 限制用户上传的图片格式和大小。 beforeUpload 的返回值可以是一个 Promise 以支持异步处理，如服务端校验等

<template>
  <a-upload
    name="avatar"
    listType="picture-card"
    class="avatar-uploader"
    :showUploadList="false"
    action="//jsonplaceholder.typicode.com/posts/"
    :beforeUpload="beforeUpload"
    @change="handleChange"
  >
    <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
    <div v-else>
        <a-icon :type="loading ? 'loading' : 'plus'" />
        <div class="ant-upload-text">Upload</div>
    </div>
  </a-upload>
</template>
<script>
function getBase64 (img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
export default {
  data () {
    return {
      loading: false,
      imageUrl: '',
    }
  },
  methods: {
    handleChange (info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.imageUrl = imageUrl
          this.loading = false
        })
      }
    },
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      if (!isJPG) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      return isJPG && isLt2M
    },
  },
}
</script>
<style>
  .avatar-uploader > .ant-upload {
    width: 128px;
    height: 128px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }
  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>

Upload上传 - 图3

已上传的文件列表

使用 defaultFileList 设置已上传的内容。

<template>
  <a-upload action="//jsonplaceholder.typicode.com/posts/" :defaultFileList="defaultFileList">
    <a-button>
      <a-icon type="upload" /> Upload
    </a-button>
  </a-upload>
</template>
<script>
export default {
  data () {
    return {
      defaultFileList: [{
        uid: '1',
        name: 'xxx.png',
        status: 'done',
        response: 'Server Error 500', // custom error message to show
        url: 'http://www.baidu.com/xxx.png',
      }, {
        uid: '2',
        name: 'yyy.png',
        status: 'done',
        url: 'http://www.baidu.com/yyy.png',
      }, {
        uid: '3',
        name: 'zzz.png',
        status: 'error',
        response: 'Server Error 500', // custom error message to show
        url: 'http://www.baidu.com/zzz.png',
      }],
    }
  },
  methods: {
    handleChange({file, fileList}) {
      if (file.status !== 'uploading') {
        console.log(file, fileList);
      }
    },
  },
}
</script>

Upload上传 - 图4

照片墙

用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。

<template>
  <div class="clearfix">
    <a-upload
      action="//jsonplaceholder.typicode.com/posts/"
      listType="picture-card"
      :fileList="fileList"
      @preview="handlePreview"
      @change="handleChange"
    >
      <div v-if="fileList.length < 3">
        <a-icon type="plus" />
        <div class="ant-upload-text">Upload</div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>
<script>
export default {
  data () {
    return {
      previewVisible: false,
      previewImage: '',
      fileList: [{
        uid: '-1',
        name: 'xxx.png',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      }],
    }
  },
  methods: {
    handleCancel () {
      this.previewVisible = false
    },
    handlePreview (file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },
    handleChange ({ fileList }) {
      this.fileList = fileList
    },
  },
}
</script>
<style>
  /* you can make up upload button and sample style by using stylesheets */
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }
  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>

Upload上传 - 图5

完全控制的上传列表

使用 fileList 对列表进行完全控制，可以实现各种自定义功能，以下演示三种情况：

上传列表数量的限制。
读取远程路径并显示链接。
按照服务器返回信息筛选成功上传的文件。

<template>
  <a-upload action="//jsonplaceholder.typicode.com/posts/" :multiple="true" :fileList="fileList" @change="handleChange">
    <a-button>
      <a-icon type="upload" /> Upload
    </a-button>
  </a-upload>
</template>
<script>
export default {
  data () {
    return {
      fileList: [{
        uid: '-1',
        name: 'xxx.png',
        status: 'done',
        url: 'http://www.baidu.com/xxx.png',
      }],
    }
  },
  methods: {
    handleChange(info) {
      let fileList = info.fileList;
      // 1. Limit the number of uploaded files
      //    Only to show two recent uploaded files, and old ones will be replaced by the new
      fileList = fileList.slice(-2);
      // 2. read from response and show file link
      fileList = fileList.map((file) => {
        if (file.response) {
          // Component will show file.url as link
          file.url = file.response.url;
        }
        return file;
      });
      // 3. filter successfully uploaded files according to response from server
      fileList = fileList.filter((file) => {
        if (file.response) {
          return file.response.status === 'success';
        }
        return false;
      });
      this.fileList = fileList
    },
  },
}
</script>

Upload上传 - 图6

拖拽上传

把文件拖入指定区域，完成上传，同样支持点击上传。设置 multiple 后，在 IE10+ 可以一次上传多个文件。

<template>
  <a-upload-dragger name="file" :multiple="true" action="//jsonplaceholder.typicode.com/posts/" @change="handleChange">
    <p class="ant-upload-drag-icon">
      <a-icon type="inbox" />
    </p>
    <p class="ant-upload-text">Click or drag file to this area to upload</p>
    <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
  </a-upload-dragger>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    handleChange(info) {
      const status = info.file.status;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
  },
}
</script>

Upload上传 - 图7

图片列表样式

上传文件为图片，可展示本地缩略图。IE8/9 不支持浏览器本地缩略图展示（Ref），可以写 thumbUrl 属性来代替。

<template>
  <div>
    <a-upload
      action="//jsonplaceholder.typicode.com/posts/"
      listType="picture"
      :defaultFileList="fileList"
    >
      <a-button>
        <a-icon type="upload" /> upload
      </a-button>
    </a-upload>
    <br />
    <br />
    <a-upload
      action="//jsonplaceholder.typicode.com/posts/"
      listType="picture"
      :defaultFileList="fileList"
      class="upload-list-inline"
    >
      <a-button>
        <a-icon type="upload" /> upload
      </a-button>
    </a-upload>
  </div>
</template>
<script>
export default {
  data () {
    return {
      fileList: [{
        uid: '-1',
        name: 'xxx.png',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      }, {
        uid: '-2',
        name: 'yyy.png',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      }],
    }
  },
}
</script>
<style scoped>
  /* tile uploaded pictures */
  .upload-list-inline >>> .ant-upload-list-item {
    float: left;
    width: 200px;
    margin-right: 8px;
  }
  .upload-list-inline >>> .ant-upload-animate-enter {
    animation-name: uploadAnimateInlineIn;
  }
  .upload-list-inline >>> .ant-upload-animate-leave {
    animation-name: uploadAnimateInlineOut;
  }
</style>

Upload上传 - 图8

手动上传

beforeUpload 返回 false 后，手动上传文件。

<template>
  <div class="clearfix">
    <a-upload
      :fileList="fileList"
      :remove="handleRemove"
      :beforeUpload="beforeUpload"
    >
      <a-button>
        <a-icon type="upload" /> Select File
      </a-button>
    </a-upload>
    <a-button
      type="primary"
      @click="handleUpload"
      :disabled="fileList.length === 0"
      :loading="uploading"
      style="margin-top: 16px"
    >
      {{uploading ? 'Uploading' : 'Start Upload' }}
    </a-button>
  </div>
</template>
<script>
import reqwest from 'reqwest'
export default {
  data () {
    return {
      fileList: [],
      uploading: false,
    }
  },
  methods: {
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file]
      return false;
    },
    handleUpload() {
      const { fileList } = this;
      const formData = new FormData();
      fileList.forEach((file) => {
        formData.append('files[]', file);
      });
      this.uploading = true
      // You can use any AJAX library you like
      reqwest({
        url: '//jsonplaceholder.typicode.com/posts/',
        method: 'post',
        processData: false,
        data: formData,
        success: () => {
          this.fileList = []
          this.uploading = false
          this.$message.success('upload successfully.');
        },
        error: () => {
          this.uploading = false
          this.$message.error('upload failed.');
        },
      });
    }
  },
}
</script>

Upload上传 - 图9

文件夹上传

支持上传一个文件夹里的所有文件。

<template>
  <a-upload action="//jsonplaceholder.typicode.com/posts/" directory>
    <a-button>
      <a-icon type="upload" /> Upload Directory
    </a-button>
  </a-upload>
</template>

API

服务端上传接口实现可以参考 jQuery-File-Upload。

参数	说明	类型	默认值
accept	接受上传的文件类型, 详见 input accept Attribute	string	无
action	上传的地址	string\|(file) => `Promise`	无
directory	支持上传文件夹（caniuse）	boolean	false
beforeUpload	上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 `File` 或 `Blob` 对象则上传 resolve 传入对象）。注意：IE9 不支持该方法。	(file, fileList) => `boolean \| Promise`	无
customRequest	通过覆盖默认的上传行为，可以自定义自己的上传实现	Function	无
data	上传所需参数或返回上传参数的方法	object\|(file) => object	无
defaultFileList	默认已经上传的文件列表	object[]	无
disabled	是否禁用	boolean	false
fileList	已经上传的文件列表（受控）	object[]	无
headers	设置上传的请求头部，IE10 以上有效	object	无
listType	上传列表的内建样式，支持三种基本样式 `text`, `picture` 和 `picture-card`	string	'text'
multiple	是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件。	boolean	false
name	发到后台的文件参数名	string	'file'
showUploadList	是否展示 uploadList, 可设为一个对象，用于单独设定 showPreviewIcon 和 showRemoveIcon	Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean }	true
supportServerRender	服务端渲染时需要打开这个	boolean	false
withCredentials	上传请求时是否携带 cookie	boolean	false
openFileDialogOnClick	点击打开文件对话框	boolean	true
remove	点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除。	Function(file): `boolean \| Promise`	无

事件

事件名称	说明	回调参数
change	上传文件改变时的状态，详见 change	Function
preview	点击文件链接或预览图标时的回调	Function(file)

change

上传中、完成、失败都会调用这个函数。

文件状态改变的回调，返回为：

{
  file: { /* ... */ },
  fileList: [ /* ... */ ],
  event: { /* ... */ },
}

file 当前操作的文件对象。

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

fileList 当前的文件列表。
event 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。