需求,上传的图片传给后台,包括后台返回的都是base64类型的。
前端把上传的图片转成base64传给后台
<a-form-model-item> <a-upload name="file" list-type="picture-card" class="avatar-uploader" :show-upload-list="false" :multiple="false" :before-upload="beforeUpload" :action="uploadUrl" :customRequest="selfUpload" @change="handleChangeFile" > <a-avatar v-if="formImg.projectRendering" :src="downloadUrl + '/' + formImg.projectRendering" alt="avatar" shape="square" /> <div v-else> <a-icon :type="loading ? 'loading' : 'plus'" /> <div class="ant-upload-text">导入图片</div> </div> </a-upload> </a-form-model-item>
//对上传的文件处理 selfUpload ({ action, file, onSuccess, onError, onProgress }) { console.log(file, 'action, file'); const base64 = new Promise(resolve => { const fileReader = new FileReader(); fileReader.readAsDataURL(file); fileReader.onload = () => { resolve(fileReader.result); // this.formImg = fileReader.result; } }); }
后台返回的也是base64格式的图片文件(解码)
base64ImgtoFile(dataurl, filename = 'file') { let arr = dataurl.split(',') let mime = arr[0].match(/:(.*?);/)[1] let suffix = mime.split('/')[1] let bstr = atob(arr[1]) let n = bstr.length let u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], `${filename}.${suffix}`, { type: mime }) }, // base64编码的图片 var base64Img = 'data:image/png;base64,XXXXX...'; //转换图片文件 var imgFile = this.base64ImgtoFile(base64Img);