近日需要完成一个将图片转为base64编码格式然后上传到服务器的功能，初始想采用ES6的fetch函数，但中间遭遇不可告人的阻碍（滑稽），最后还是决定采用Ajax来上传，百度了很多方案无果，自己尝试许多遍后摸索出了一套可行的方法，附上代码（采用jQery中的Ajax方法）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
$(function () { 
$("#upload").click(function () {//button的id设为upload
let input = document.getElementById("file");
let reader = new FileReader();
reader.readAsDataURL(input.files[0]);
let newBase64;
let fileName = input.files[0].name.split(".");
reader.onload = function (event)
{
 var base64 = reader.result;
 if (fileName[1] == 'png'){
 newBase64 = base64.slice(22);
 console.log(newBase64);
 ajaxUploadBase64File(newBase64);}
 else if (fileName[1] == 'jpg'){
 newBase64 = base64.slice(23);
 console.log(newBase64);
 ajaxUploadBase64File(newBase64);}
 else if (fileName[1] == 'jpeg'){
 newBase64 = base64.slice(23);
 console.log(newBase64);
 ajaxUploadBase64File(newBase64);}
 else{
 alert('暂时不支持该格式的图片');}
	}
    }); 
 }); 
function ajaxUploadBase64File(newBase64){
 $.ajax({ 
  type: 'post', 
  url: "https://", //上传文件的请求路径
  dataType: "json",
  contentType: 'application/json',
  data: JSON.stringify({"instances" : [{"b64": newBase64}]}),
  //发送数据的格式，根据服务器接口自行修改
  cache: false,
  processData: false, 
  success: function(data){ 
  //data为返回值，对他进行后续操作
  },
  error: function(response){
	alert("上传失败");
  }
  }); 
}

注意服务器一定要已配置CORS