原生Js图片上传

Posted 2020-08-14

上传图片通常用两种格式：

base64，byte

----------------------------------------------------------------------------------------

byte上传：

　　FileReader.readAsArrayBuffer//将file读取为ArrayBuffer

base64上传

　　FileReader.readAsDataUrl//将file读取为Url。

----------------------------------------------------------------------------------------

                                      ====Byte上传===

前端

　　

<input type="file" onchange="wl(event)" filetype="image/*"/>

Js

function FW(event)
    var input = event.target;
    var reader = new FileReader();
    reader.onload = function(){
        var dataAF = reader.result;
        httpHelper({
            type:‘post‘,
            async:‘true‘,
            data:dataAF,
            success:function(){
                //上传成功
            },
            error:function(){
                //上传失败
            }
        });
    };
    reader.readAsDataBuffer(input.files[0]);
};
function httpHelper(params) {
    var request;
    if(XMLHttpRequest)
        request=new XMLHttpRequest();
    else
        request=new ActiveXObject("Microsoft.XMLHTTP");
    request.onreadystatechange = function () {
        if (request.readyState == 4) {
            if (request.status == 200) {
                if (params.success)
                    params.success(request.responseText);
            }
            else if (parseInt(request.status / 100) == 4) {
                if (params.error)
                    params.error(request.responseText);
            }
        }
    }
    request.open(params.type, params.url, params.async);
    try {
        request.send(params.data||null);
    } catch (e) {
        if (params.error)
            params.error(request.responseText);
    }
}

后台直接从request的stream读取，储存为图片就好了，图片格式可以放到请求头里。

----------------------------------------------------------------------

                          ======base64=======

又时读取文件是图片，读取之后提供要浏览。这时需要把file读取为Url，把Url上传到服务器后需要对Url进行分解才能得到自己想要的图片base64数据。

如果用get请求上传图片时，有些base64特殊字符会被转义（=，+，-），此时需要在服务端还原。然后把base64解码为byte数组，然后创建为图片。