图片如何以文件的格式发送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(/\n/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)