js文件上传及格式装换

文件流上传

<input type="file" id='imgBlob' @change='changeImgBlob' />

<script>
	function changeImgBlob(e){     
        // 文件流: e.target.files[0]
        
        // 将文件流放在一个formData对象内，formDate本质是一个键值对的表单
        const fd = new FormData();
        fd.append("files",e.target.files[0]);
        fd.append("token",xxxxx); // 根据需求来可以放一些其他数据
        
        // 通过接口将数据发向后台
        axios({
            url: "/yoorUrl", //URL,根据实际情况来
            method: "post",
            headers: { "Content-Type": "multipart/form-data" },
            data: fd
      	});
        
        // 将文件流对象转为blob格式，可用于预览
        img.src = window.URL.createObjectURL(file.files[0]);
    }
</script>

Base64上传

<input type="file" id='imgBlob' @change='changeImgBase' />

<script>
	function changeImgBase(e){
        // 通过FileReader将文件流转为base64格式
        	const file = new FileReader();
        // 将文件处理为base64，此操作为异步
        	file.readAsDataURL(e.target.files[0]);
        // 事先做好文件转换异步完后逻辑的处理
            file.onloadend = function (e) {
              // e.target.result 可获得base64内容

              // 上传后台
              axios({
                 url: '/yoorUrl', //URL,根据实际情况来
                 method: 'post',
                 data: {
                   files: e.target.result,
                }
               });
            };
    }
</script>

文件格式转换

// File、Blob 转化成 dataURL，上面Base64上传有写
// File基于blob封装
// dataURL(base64)转化成 Blob(二进制)对象
function dataURLToBlob(fileDataURL) {
    let arr = fileDataURL.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while(n --) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    return new Blob([u8arr], {type: mime})
}

// File, Blob 文件数据绘制到 canvas
// 思路：File, Blob ——> dataURL ——> canvas
 
function fileAndBlobToCanvas(fileDataURL) {
    let img = new Image()
    img.src = fileDataURL
    let canvas = document.createElement('canvas')
    if(!canvas.getContext) {
      alert('浏览器不支持canvas')
      return;
    }
    let ctx = canvas.getContext('2d')
    document.getElementById('container').appendChild(canvas)
    img.onload = function() {
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
    }
}

//  从 canvas 中获取文件 dataURL
function canvasToDataURL() {
    let canvas = document.createElement('canvas')
    let canvasDataURL = canvas.toDataURL('image/png', 1.0) // 主要调用此方法
    return canvasDataURL
}