图片如何以文件的格式发送ajax传到后端(手机端、PC端)

手机端:

一、如果你上传的是一张图片,那你获得的参数可能是一大串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)