antD customRequest 自定义上传 antd upload 上传加参数_上传文件


就为这问题，今天找了一天，各种高大上又复杂的方案，看得我头都炸。就刚刚突然脑海里闪了一下，想到了这个绝对轻巧、绝对傻瓜式、又绝对稳定的解决方案，于是迫不及待写下这篇文章，算是一个小纪念吧

先描述问题：

使用了 antd vue 的 upload 组件来上传文件，在beforeUpload中定义了一个 Promise 来实现校验上传文件是否符合rule，符合则会返回resolve，否则直接拒绝不会显示在filelist中。但是返回 resolve 的时候就直接 默认上传，应该如何 取消这个行为


antD customRequest 自定义上传 antd upload 上传加参数_上传_02

beforeUpload的官方文档注释


简而言之，我要实现2点：

  1. 上传文件，在文件出现在filelist之前对文件进行校验，如果校验不通过，文件不会出现在filelist中。

2. 校验通过后不上传，由用户手动上传。

而今天看到的方案，总体思路可分为两种：

第一种：使用表单的自定义验证控件，对upload组件的上传文件进行校验。

缺点：代码比较复杂，而且试了网上的几种都没有成功。

第二种，比较多人推荐：将默认上传和校验分开做。

beforeUpload: (file) => {
 return false
 }

这里永远保持返回false，控制文件不自动上传。然后校验在提交按钮实现，点击提交按钮后，首先创建Promise对象对文件进行校验，通过之后再上传。这里一个很明显的缺点就是会卡，因为要判断后再提交，而且并不符合我的第一需求：不出现在filelist中。

我的做法：

首先分析，要控制不自动默认上传，必须return false，也就是

beforeUpload: (file) => { return false }

要校验，同时不合法文件不会出现在filelist中，需要是


FILEbeforeUpload: (file) => {
      return new Promise((resolve, reject) => {
        const isLt10M = file.size / 1024 / 1024 < 10
        if (!isLt10M) {
          message.error('文件大小不能大于10MB')
          reject(new Error(false))
        } else {
          message.info('文件正在上传中...')
          resolve()
        }
      })
    },


返回reject才可以实现这个需求。

所以目前，看起来只能2选1。所以关键点是：能不能让return false的时候，变成return reject呢？也就是说，当我不使用Promise的时候，我在应该返回false的时候让他变成返回一个reject。

最终做法就是：在beforeUpload用let命令定义一个Promise，一个永远只会返回reject的Promise。


// 定义一个只会返回reject的Promise，let命令
let p1 = new Promise((resolve, reject) => {
 reject(new Error())
})


然后修改return false 为 return p1即可。总共3行代码。

采用的时候，需要考虑是否会影响安全性，因为我这里没有其他逻辑，所以 买他！！。

如果有批评意见，欢迎指出，不胜感激。