How to send pictures to the server in the form of file stream through the upload control of antd

Preface

This few days , Encountered a demand , It is required to send the picture to the server in the form of file stream , The interface document is as follows ：

 Request parameters 	picurl: 2020/9/10/jrg00002.jpg
file：jrg00002.jpg

Obviously ,file Parameter is File stream object , So how to upload pictures to the server

FormData

Files must be uploaded to the server in the form of file streams , There are many forms of file flow , such as Blob、FormData etc. , Here we chose FormData,ui Component selected antd, The core code is as follows

<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>

Pay attention to the following two points

1. info.file Non primitive File file , Its originFileObj The attribute value is the original File file , Use formData.append('file', file.originFileObj) That is, it can be transferred to the background in the form of file stream
2. ajax The head of the request Content-Type Need to be multipart/form-data Or other forms agreed by the background interface , But it must not be application/json form