手机端:
一、如果你上传的是一张图片,那你获得的参数可能是一大串url地址,你需要在地址前拼接上:
data:image/jpeg;base64,
将它变为base64格式的url地址
例如:
二、将base64格式转化为blob格式(dataurl 即你传过来的base64地址)
/** * url转blob格式 */ const dataURLtoBlob = (dataurl) => { let arr = dataurl.split(','); let mime = arr[0].match(/:(.*?);/)[1]; let bstr = atob(arr[1]); let n = bstr.length; let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); };
三、最重要一步:
const param = new FormData(); param.append('file', imageData, "my_custom_filename.jpg"); //系统给我们的文件流自动命名为blob,所以要自定义
imageData: 你处理好的blob格式(即上面的第二点)
这里我自定义了一个后缀为.jpg的文件名,如果不自定义,传到后端那边的名字就是blob,那边是识别不了的。
四、最后要设置好你传过去api的json格式
设置好请求头:(这也是我经常忘记设置的东西,不设置的话传过去是一个空对象)
config.headers = { "Content-Type": "multipart/form-data;" }; // 设置请求头
完整代码:
const localData = res.localData; //这个就是获取的url地址,就不展示了 let imageBase64 = ''; if (localData.indexOf('data:image') == 0) { //苹果的直接赋值,默认生成'data:image/jpeg;base64,'的头部拼接 imageBase64 = localData; } else { //此处是安卓中的唯一的坑!在拼接前需要对localData进行换行符的全局替换 //此时一个正常的base64图片路径就完美生成赋值到img的src中了 imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/ /g, ''); } image_base64.value = imageBase64; let imageData = dataURLtoBlob(image_base64.value) // 将base64转换为blob格式 handleAvatar(imageData) //转换为文件格式并上传ajax /** * url转blob格式 */ const dataURLtoBlob = (dataurl) => { let arr = dataurl.split(','); let mime = arr[0].match(/:(.*?);/)[1]; let bstr = atob(arr[1]); let n = bstr.length; let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); }; /** 上传图片 */ const handleAvatar = (imageData) => { const param = new FormData(); param.append('file', imageData, "my_custom_filename.jpg"); //系统给我们的文件流自动命名为blob,所以要自定义 //发送ajax(调用项目的api,就不一一展示了) apiMethod(param).then((res) => { console.log(res); ElMessage.error('图片识别失败'); //elemenmt plus组件 需要用的可以去文档查看 }).catch((err) => { err; ElMessage.error('图片识别失败'); //elemenmt plus组件 需要用的可以去文档查看 }) };
PC端:
这里用到的是element plus的 el-upload 文件上传组件,有需要可以去文档查看
<el-upload class="uploadDemo" action="#" :http-request="uploadAction"> const uploadAction = (param) => { let formData = new FormData(); formData.append('file', param.file); //调用api接口(请求头还是要记得跟上面一样设置) getAllOrderList(formData).then((res) => { console.log(res); }).catch((err) => { err; }) }
element plus官方文档: Upload 上传 | Element Plus (element-plus.org)