antdesignvue upload vue3个人笔记待更新

最新推荐文章于 2024-07-11 10:19:07 发布

原创最新推荐文章于 2024-07-11 10:19:07 发布 · 551 阅读

0 ·

CC 4.0 BY-SA版权

Vue3.X 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了在前端开发中处理文件上传的两个关键操作：`remove`回调用于在用户请求删除文件时的逻辑处理，以及`beforeUpload`钩子用于上传前的验证和预处理。`handleRemove`函数展示了如何从文件列表中删除选定的文件，而`beforeUpload`则用于扩展文件列表并在验证通过前阻止上传。这些功能对于实现定制化的文件上传体验至关重要。

remove 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除。 Function(file): boolean | Promise 无

beforeUpload 上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 File 或 Blob 对象则上传 resolve 传入对象）。注意：IE9 不支持该方法。 (file, fileList) => boolean | Promise 无

<a-upload multiple :remove="handleRemove" :beforeUpload="beforeUpload" :fileList="fileList">
  <a-button> 上传文件</a-button>
</a-upload>

    // 文件多选删除文件操作
    handleRemove(file: FileInfo) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    
    beforeUpload(file: FileInfo) {
      this.fileList = [...this.fileList, file];
      return false;
    },