如何通过antd的upload控件，将图片以文件流的形式发送给服务器

前言

这几天，遇到个需求，要求将图片以文件流的形式发送给服务器，接口文档内容如下所示：

请求参数	picurl: 2020/9/10/jrg00002.jpg
file：jrg00002.jpg

很明显，file参数为文件流对象，那么如何将图片上传给服务器呢

FormData

文件必须以文件流的形式上传给服务器，而文件流的形式有多种，比如Blob、FormData等，这里我们选择了FormData，ui组件选择了antd，核心代码如下所示

<template>
	<a-upload name="file" list-type="picture-card" class="avatar-uploader" :multiple="true" :show-upload-list="false" :before-upload="beforeUpload" :file-list="fileList" @preview="handlePreview" @change="handleChange" >
	    <img v-if="item.value" :src="item.value" alt="avatar" />
	    <div v-else>
	        <a-icon :type="loading ? 'loading' : 'plus'" />
	    </div>
	</a-upload>
</template>
<script> export default {
       methods:{
       handleChange(info) {
       const file = info.file this.loading = true; const myDate = new Date() const year = myDate.getFullYear() const month = myDate.getMonth() + 1 const day = myDate.getDate(); const formData = new FormData(); formData.append('file', file.originFileObj); formData.append('picurl', `${
        year}/${
        month}/${
        day}/${
        file.name}`); formData.append('adcode', this.adcode) uploadPhotoImg(formData).then(res => {
       console.log(res) }).finally(_=> {
       this.loading = false }) } } } </script>

注意以下两点

1. info.file非原始File文件，其originFileObj属性值才是原始File文件，使用formData.append('file', file.originFileObj)即可以文件流的形式传递给后台
2. ajax请求的头部Content-Type需为multipart/form-data或其他后台接口约定的形式，但一定不是application/json形式