Uploader 文件上传

文档: https://vant-contrib.gitee.io/vant/#/zh-CN/uploader

文件上传组件提供了

  • 打开本地文件(或摄像头), 选择文件(或拍照)的功能.
  • 选择的图片以 File 对象的形式 (可多选, 可包含 base64 格式字符串) 作为 afterRead 方法的参数来使用.
  • 并提供图片预览, 以及图片状态的控制功能.
  • 支持图片的删除控制.

但是该组件未提供上传的逻辑, 需要手动控制上传

基本用法:

<van-uploader :after-read="afterReadHandler"></van-uploader>

const afterReadHander = (items: UploaderFileListItem | UploaderFileListItem[]) => {
  // 处理过程
}

其中 UploaderFileListItem 的类型定义为:

export type UploaderFileListItem = {
    url?: string;
    file?: File;
    objectUrl?: string;
    content?: string;
    isImage?: boolean;
    status?: '' | 'uploading' | 'done' | 'failed';
    message?: string;
    imageFit?: ImageFit;
    deletable?: boolean;
    reupload?: boolean;
    previewSize?: Numeric;
    beforeDelete?: Interceptor;
};

使用 status 属性, 控制页面上传状态 (当图片预览时, 可以看到上传的动效果).

使用 file 属性来获取图片的 File 对象, 构建 FormData 数据可以上传文件.

其中 url 是 base64 数据, 或者是图片进行绑定时使用的图片地址.

上传文件的代码使用 axios 为例:

const fitem = item as UploaderFileListItem
const formdata = new FormData()
formdata.append('file', fitem.file!)
const res await axios.post('/api/FileData/UploadFile', formdata, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})

常用属性:

  • v-model 用于绑定, 其内容与 after-read 函数的参数一致.
  • multiple 当允许多文件上传时, 可以呈现预览图片.
  • max-count 可以控制文件上传的数量 (但是无法控制打开文件夹选择文件的数量)
  • 可以使用默认插槽来自定义上传按钮的样式.
  • beforeRead 来实现上传前置处理, 返回 true 才表示可以上传, 支持使用 Promise.
  • capture="camera" 表示直接调用相机, 跳过选择相册的功能.
Last Updated:
Contributors: jk