Upload 上传

文件选择上传和拖拽上传控件。

何时使用

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

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

代码演示

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

<template>
  <f-upload
    v-model:file-list="fileList"
    name="file"
    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
    :headers="headers"
    @change="handleChange"
  >
    <f-button>
      <upload-outlined></upload-outlined>
      Click to Upload
    </f-button>
  </f-upload>
</template>
<script lang="ts">
import { message } from 'ant-design-vue';
import { UploadOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
import type { UploadChangeParam } from 'ant-design-vue';

export default defineComponent({
  components: {
    UploadOutlined,
  },
  setup() {
    const handleChange = (info: UploadChangeParam) => {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    };

    const fileList = ref([]);
    return {
      fileList,
      headers: {
        authorization: 'authorization-text',
      },
      handleChange,
    };
  },
});
</script>

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

<template>
  <div class="clearfix">
    <f-upload
      v-model:file-list="fileList"
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      list-type="picture-card"
      @preview="handlePreview"
    >
      <div v-if="fileList.length < 8">
        <plus-outlined />
        <div style="margin-top: 8px">Upload</div>
      </div>
    </f-upload>
  </div>
</template>
<script lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue'
import { defineComponent, ref } from 'vue'

function getBase64(file: File) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}

export default defineComponent({
  components: {
    PlusOutlined,
  },
  setup() {
    const previewVisible = ref(false)
    const previewImage = ref('')
    const previewTitle = ref('')

    const fileList = ref<any[]>([
      {
        uid: '-1',
        name: 'image.png',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      },
      {
        uid: '-2',
        name: 'image.png',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      },
      {
        uid: '-3',
        name: 'image.png',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      },
      {
        uid: '-4',
        name: 'image.png',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      },
      {
        uid: '-xxx',
        percent: 50,
        name: 'image.png',
        status: 'uploading',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      },
      {
        uid: '-5',
        name: 'image.png',
        status: 'error',
      },
    ])

    const handleCancel = () => {
      previewVisible.value = false
      previewTitle.value = ''
    }
    const handlePreview = async file => {
      if (!file.url && !file.preview) {
        file.preview = (await getBase64(file.originFileObj)) as string
      }
      previewImage.value = file.url || file.preview
      previewVisible.value = true
      previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1)
    }

    return {
      previewVisible,
      previewImage,
      fileList,
      handleCancel,
      handlePreview,
      previewTitle,
    }
  },
})
</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>

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

<template>
  <f-upload-dragger
    v-model:fileList="fileList"
    name="file"
    :multiple="true"
    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
    @change="handleChange"
    @drop="handleDrop"
  >
    <p class="fs-upload-drag-icon">
      <inbox-outlined></inbox-outlined>
    </p>
    <p class="fs-upload-text">Click or drag file to this area to upload</p>
    <p class="fs-upload-hint">
      Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files
    </p>
  </f-upload-dragger>
</template>
<script lang="ts">
import { InboxOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { defineComponent, ref } from 'vue'
import type { UploadChangeParam } from 'ant-design-vue'

export default defineComponent({
  components: {
    InboxOutlined,
  },
  setup() {
    const handleChange = (info: UploadChangeParam) => {
      const status = info.file.status
      if (status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`)
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`)
      }
    }
    return {
      handleChange,
      fileList: ref([]),
      handleDrop: (e: DragEvent) => {
        console.log(e)
      },
    }
  },
})
</script>

API

参数	说明	类型	默认值	版本
accept	接受上传的文件类型, 详见 input accept Attribute	string	无
action	上传的地址	string|(file) => Promise	无
beforeUpload	上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 File 或 Blob 对象则上传 resolve 传入对象）。	(file, fileList) => boolean | Promise	无
customRequest	通过覆盖默认的上传行为，可以自定义自己的上传实现	function	无
data	上传所需参数或返回上传参数的方法	object|(file) => object	无
directory	支持上传文件夹（caniuse）	boolean	false	3.0
disabled	是否禁用	boolean	false
downloadIcon	自定义下载 icon	v-slot:iconRender="{file: UploadFile}"	-	3.0
fileList	已经上传的文件列表（受控）	object[]	无
headers	设置上传的请求头部，IE10 以上有效	object	无
iconRender	自定义显示 icon	v-slot:iconRender="{file: UploadFile, listType?: UploadListType}"	-	3.0
isImageUrl	自定义缩略图是否使用 <img /> 标签进行显示	(file: UploadFile) => boolean	-	3.0
itemRender	自定义上传列表项	v-slot:itemRender="{originNode: VNode, file: UploadFile, fileList: object[], actions: { download: function, preview: function, remove: function }"	-	3.0
listType	上传列表的内建样式，支持三种基本样式 text, picture 和 picture-card	string	text
maxCount	限制上传数量。当为 1 时，始终用最新上传的文件代替当前文件	number	-	3.0
method	上传请求的 http method	string	post	1.5.0
multiple	是否支持多选文件，ie10+ 支持。开启后按住 ctrl 可选择多个文件。	boolean	false
name	发到后台的文件参数名	string	file
openFileDialogOnClick	点击打开文件对话框	boolean	true	3.0
previewFile	自定义文件预览逻辑	(file: File | Blob) => Promise<dataURL: string>	无	1.5.0
previewIcon	自定义预览 icon	v-slot:iconRender="{file: UploadFile}"	-	3.0
progress	自定义进度条样式	ProgressProps（仅支持 type="line"）	{ strokeWidth: 2, showInfo: false }	3.0
removeIcon	自定义删除 icon	v-slot:iconRender="{file: UploadFile}"	-	3.0
showUploadList	是否展示 uploadList, 可设为一个对象，用于单独设定 showPreviewIcon, showRemoveIcon 和 showDownloadIcon	boolean | { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean }	true	showDownloadIcon(3.0)
supportServerRender	服务端渲染时需要打开这个	boolean	false
withCredentials	上传请求时是否携带 cookie	boolean	false

事件

事件名称	说明	回调参数	版本
change	上传文件改变时的状态，详见 change	function	无
download	点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页。	function(file): void	跳转新标签页	1.5.0
drop	当文件被拖入上传区域时执行的回调功能	(event: DragEvent) => void	-	3.0
preview	点击文件链接或预览图标时的回调	function(file)	无
reject	拖拽文件不符合 accept 类型时的回调	function(fileList)	无
remove	点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除	function(file): boolean | Promise	-	3.0

UploadFile

继承自 File，附带额外属性用于渲染。

参数	说明	类型	默认值
name	文件名	string	-
percent	上传进度	number	-
status	上传状态，不同状态展示颜色也会有所不同	error | success | done | uploading | removed	-
thumbUrl	缩略图地址	string	-
uid	唯一标识符，不设置时会自动生成	string	-
url	下载地址	string	-

change

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

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

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

1. file 当前操作的文件对象。

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

2. fileList 当前的文件列表。

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