上传文件知识点总结

在实际项目中，不可避免的会有上传文件的功能，本篇文章，不会具体介绍实现该功能的各种插件，而是是总结一下，在原生input[type=file]上实现，以及文件与数据流之间的转换

  <input class="fl Inp" type="file" @change="readURL">

upimg() {
    let fileinput = event.currentTarget
  // fileinput.files[0] 为该文件的file格式
    if (fileinput.files && fileinput.files[0]) {
// 如果后台接收的文件格式为file类型，则我们需要new FormData方法将文件转换为表单形式提交
        let formData = new FormData()
        formData.append('file', fileinput.files[0])
        upload(formData).then(response => {
// 文件上传成功，后台接口返回文件地址，前端显示在页面上
            this.imgUrl = response.data
        })
    }
}

以上方法则可以实现文件上传的功能，但是该方法有个缺点是，上传的文件都要放到服务器，会造成服务器资源的浪费

另一种需求是，我们选择文件，然后要在页面进行文件的重选、预览功能。或者说，后台需要的文件格式是base64或blob等格式，这个时候，就需要我们对file格式进行各种转换。


upimg() {
    let fileinput = event.currentTarget
    // fileinput.files[0] 为该文件的file格式
    if (fileinput.files && fileinput.files[0]) {
        var reader = new FileReader()
        reader.onload = function (e) {
        // e.target.result为base64,可以通过src直接给图片赋值地址
        }
        reader.readAsDataURL(fileinput.files[0])
    }
}

base64此时由于传输的图片内容就是一段字符串，故上传接口可以当做普通post接口处理，当图片传输到后台后，可以在转换为文件实体存储。
当然，考虑到base64转换效率及其本身的大小，本方法还是适合于上传内容简单或所占内存较小的文件。

以下为一些转换方法总结

一、base64转换成file

dataURLtoFile(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 File([u8arr], this.fielName, { type: mime })
}

二、base64转换成blob

function dataURLtoBlob(dataurl) {
    var arr = dataurl.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 });
}

三、Blob转换成base64

function blobToDataURL(blob, callback) {
    let a = new FileReader();
    a.onload = function (e) { callback(e.target.result); }
    a.readAsDataURL(blob);
}

四、js图片转换为base64


function getImgToBase64(url, callback) {
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        img = new Image;
    img.crossOrigin = 'Anonymous';
    img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL('image/png');
        callback(dataURL);
        canvas = null;
    };
    img.src = url;
}

扫描二维码关注公众号，回复： 4952989 查看本文章

上传文件知识点总结

猜你喜欢