antd 图片封装成binary文件

背景

react中使用antd上传图片，我们都知道，如果组件中写了action则直接将图片file传到服务器，但是当后端要求我们使用binary文件格式传递时，我们该怎么做呢？

首先去除action，使用beforeUpload

<Upload
	maxCount={1} // 限制上传的文件个数
	listType="picture-card" // 文件排列展示方式
	fileList={fileList} // 上传的文件列表数据
	beforeUpload={this.beforeUpload} // 上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传
	onRemove={this.onRemove} // 删除上传的文件
>
	<Button>点击上传</Button>
</Upload>

具体看下beforeUpload中如何操作

beforeUpload = file => {
	// 限制一张
	if (this.state.fileList.length) {
		return false
	}
	this.setState(state => ({
		fileList: [...state.fileList, file], // 存入fileList，将在UI上展示已上传的图片
	}), () => {
	});

	return false; // 一定要写 否则会报404，因为会默认一个action地址，但是并没有这个地址，所以会报404
}

图片上传后展示图片

删除文件onRemove中如何操作

onRemove = file => {
	this.setState(state => {
		const index = state.fileList.indexOf(file);
		const newFileList = state.fileList.slice();
		newFileList.splice(index, 1);
		return {
			fileList: newFileList
		};
	});
}

删除后会重新出现图片上传按钮

至此我们只完成了前端图片上传与删除的展示效果，接下来重点封装File文件为binary传给后端存储

第一步：在图片上传接口中定义使用formdata格式传递

// 编辑器上传图片
export function ueditorUploadImage(params) {
	return http({
		url: '/uploadImage.do',
		method: 'POST',
		headers: {
			'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq'
		},
		isFormData: true,
		data: params
	})
}

重点：！！！一定要写明content-type为’Content-Type’: ‘multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq’

第二步：在调用接口页面，使用formdata封装

upload() {
	const formData = new FormData();
	formData.append('upload', this.state.fileList[0]) // 上面上传文件时存储在fileList中的数据
	// 调用接口
	ueditorUploadImage(formData).then(res => {...}).catch(err => err)
}

注意：如果没有上传文件时，后端也要求传个binary过去，此时我们可以自己构建一个空的binary文件

	// 未上传图片时 封装binary
	const baseFile = new File([new ArrayBuffer(0)], '', { type: 'image/jpeg' })
	// File第二个参数为 ''，代表没有传任何值，是一个空的binary文件

因此兼容一下有无文件上传时代码

upload() {
	const baseFile = new File([new ArrayBuffer(0)], '', { type: 'image/jpeg' })
	const formData = new FormData();
	formData.append('upload', this.state.fileList.length ? this.state.fileList[0] : baseFile ) // 上面上传文件时存储在fileList中的数据
	// 调用接口
	ueditorUploadImage(formData).then(res => {...}).catch(err => err)
}

图片封装成binary传给后端就完成啦，点个小心心吧^_