blog-web/base64文件上传.md at bf1aee35133c5e4071e957737399e2bdf8da0ecf

sookie/blog-web

Fork 0

结发受长生 113825166a base64文件上传

2018-05-30 16:37:25 +08:00

5.2 KiB

Raw Blame History

title

date

获取base64编码

file类型的input

//这是一个<input id='upload-file' type='file' />元素
var fileInput = document.getElementById("upload-file");
fileInput.addEventListener('change', function() {
  //获取File对象
  var file = fileInput.files[0];
  var reader = new FileReader();
  var fileBase64 = null;
  reader.onload = function() {
    fileBase64 = e.target.result; //base64编码
  }
  reader.readAsDataURL(file);
}

这里获取到的fileBase64就是文件的base64编码如果这个文件是一个图片 , 我们当然可以借助它来实现所选图片的预览 ( 当然需要判断所选的文件是不是图片 ) 比如

//这是一个DIV
var preview = document.getElementById("image-preview");
preview.style.backgroundImage = 'url(' + fileBase64 + ')';

canvas画布

对于canvas画布 , 我们可以借助toDataURL这个API , 来获得这个画布的快照

var imageBase64 = document.getElementById("test-canvas").toDataURL('image/jpeg', 0.8);

toDataURL有两个参数, 都是可选的

图片格式，默认为 image/png
在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量如果超出取值范围，将会使用默认值 0.92

如果画布没有填充底色, 生成jpeg格式的快照图片, 底色将为黑色如果需要底色透明, 可以使用 image/png 格式

文件上传

通过观察toDataURL方法的返回结果

可以发现这个字符串的逗号之前是对文件类型的标识之后才是文件的实际内容(base64编码可以直接表示二进制的内容) 所以在实际执行上传的时候 , 需要使用的是逗号之后的内容

var imgBase64 = document.getElementById("test-canvas").toDataURL('image/png')
//atob 对用base-64编码过的字符串进行解码
var imgBytes = window.atob(imgBase64.split(',')[1])
var arrBuffer = new ArrayBuffer(imgBytes.length)
var ubuffer = new Uint8Array(arrBuffer)
for (let i = 0; i < imgBytes.length; i++) {
  ubuffer[i] = imgBytes.charCodeAt(i)
}
let blob;
try {
  blob = new Blob([ubuffer], {type: 'image/png'});
} catch (e) { // 安卓手机不支持Blob构造方法
  let BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
  if(e.name === 'TypeError' && BlobBuilder){
    let blobBuilder = new BlobBuilder();
    blobBuilder.append(arrBuffer);
    blob = blobBuilder.getBlob('image/png');
  }
}
var formData = new FormData();
formData.append('uploadImg', blob);
formData.append('token', 'xxx');//如果需要, 可以添加其他字段
const config = {
  // headers: {'Content-Type': 'multipart/form-data'},
  withCredentials: true
}
axios.create(config).post('ApiUrl', formData).then((response) => {
    alert(response.data.msg)
  })

最后的ajax请求是借助axios来实现的 , 其他的库基本同理 , 遵循各自API即可后端写法与blob对应的字段名对应即可比如上面示例代码当中使用的是 uploadImg 那么后端代码大致如下

@PostMapping("/uploadSnapshot")
public String uploadSnapshot(@RequestParam("uploadImg") MultipartFile uploadImg) {
  //do something...
  
  return "上传成功";
}

多文件上传

有了上面的实现方式 , 多文件上传就十分简单了其实就是对于多个Blob对象 , 执行多次formData.append

注意 : 不是在一个Blob当中添加多个Uint8Array

假如当前页面有多个canvas , 我需要一次性上传这些快照图片

var canvasDoms = document.getElementsByTagName('canvas')
var formData = new FormData();
for(let index=0 ; index<canvasDoms.length ; index++) {
  let imgBytes = window.atob(canvasDoms[index].toDataURL('image/png').split(',')[1])
  let arrBuffer = new ArrayBuffer(imgBytes.length)
  let ubuffer = new Uint8Array(arrBuffer)
  for (let i = 0; i < imgBytes.length; i++) {
    ubuffer[i] = imgBytes.charCodeAt(i)
  }
  let blob;
  try {
    blob = new Blob([ubuffer], {type: 'image/png'});
  } catch (e) { // 安卓手机不支持Blob构造方法
    let BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
    if(e.name === 'TypeError' && BlobBuilder){
      let blobBuilder = new BlobBuilder();
      blobBuilder.append(arrBuffer);
      blob = blobBuilder.getBlob('image/png');
    }
  }
  formData.append('uploadImg', blob);
}
//...之后执行ajax请求 , 与单文件上传没有差别

在后端需要用MultipartFile对象的数组进行接收

@PostMapping("/uploadSnapshot")
public String uploadSnapshot(@RequestParam("uploadImg") MultipartFile uploadImg[]) {
  //do something...
  
  return "上传成功";
}

5.2 KiB Raw Blame History Unescape Escape