antd upload手动上传_Ant Design Upload 组件之手动上传

在ant design中提供了一个文件上传的组件Upload,可以方便地把本地的文件上传到服务器。但是antd 的官方例子中给的都是当点击上传的时候直接把图片上传到服务器，可是在实际的业务中，我们可能会需要实现在点击上传的时候不会立马发送请求把图片或者文件上传到服务器，而是需要在适当的时候提交或者和其他的数据一起提交。那么此时默认的上传行为就行不通了，我们就需要手动控制文件的上传时机。

假如现在我们的需求是点击页面中的上传按钮，出现一个弹窗，在弹窗我们上传需要的图片但并不直接上传到服务器，当点击弹窗的确定按钮时，才将上传的文件发送到服务器。类似这样的：

那么该如何实现呢？接下来我们就一步步来看。

第一步：阻止默认的上传事件

Upload组件中提供了一个上传前的钩子函数beforeUpload,当这个钩子函数返回false的时候，默认上传行为就会被阻止。那么我们可以把代码写成这样。

beforeUpload: (file) => {

let files = [];

this.setState({

fileList: [...files]

})

return false;

},

看起来好像时没有问题的，但是当我们在页面点击上传的时候，我们会发现，图片没有展示出来。这是为什么呢，我们把上传的图片信息打印出来：

不难发现，在beforeUpload中打印出的file的信息里面并没有图片的路径地址，所以图片展示不出来。所以我们需要用FileReader来获取图片的地址。代码如下：

const reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = e => {

file.thumbUrl = e.target.result;

files.push(file)

files.map((item, index) => {

if (file.name === item.name) {

count.push(index);

if (count.length > 1) {

message.error("文件已存在!");

files.splice(index, 1);

return;

}

}

})

this.setState({

fileList: [...files]

})

this.props.onChange(this.state.fileList)

};

这段代码的作用就在于读取到上传的图片的路径地址，并且把它赋给文件的thumbUrl，这样页面中既可以展示上传的图片，又阻止了图片的默认上传行为。

第二步：手动上传，在需要的时候上传文件

现在图片已经展示出来了，我希望在点击Modal的确认按钮时，把当前的文件信息上传到服务器。

因为上传的图片应该是一个file文件，所以我们需要的是new FormData(),代码如下：

const formData = new FormData();

fileList.forEach((file) => {

formData.append('files[]', file);

});

接着我们就可以在请求中把当前的formData作为参数传给后端了。

需要注意的是：在请求的时候不要携带content-type,浏览器会根据当前的文件格式自动添加content-type为multipart/form-data，如果手动设置了content-type，传输的文件格式就不是multipart/form-data了。