Base64圖片上傳與訪問

首先占卧，base64字符串涣觉，瀏覽器是可以直接解析的，格式是:

<img src="data:image/jpeg;base64,xxxxxx" width="320px" height="220px" alt="">

1列肢、ajax封裝

var contextPath = "http://localhost:80/";

$.extend({
    send: function (url, jsonObject, method, callback) {
        var data = method.toUpperCase()=="GET"?jsonObject:JSON.stringify(jsonObject);//GET方法不帶參數恰画，是自動轉化為URL，所以不能轉為JSON字符串
        request(url,data, method, callback, "application/json;charset=UTF-8",true);
    },
    upload: function (url, file ,callback) {
        request(url, file,"post", callback, false,false);
    }
});

function request(url,data,method,callback,contentType,processData) {
    $.ajax({
        type: method,
        url: contextPath+url,
        data: data,
        dataType: "json",
        processData: processData, //用于對data參數進行序列化處理
        contentType: contentType,
        async: true,
        success: function(data){
            console.log(data);
            if(data.code == 200){
                callback(data.data);
            }else {
                alert(data.message);
            }
        },
        error: function (err) {
            alert("系統(tǒng)錯誤");
        }
    });
}

HTML:

<script src="https://code.jquery.com/jquery-1.8.3.js"></script>

<input id="file" type="file" value="選擇圖片">
<img id="img" src="" width="320px" height="220px" alt="">
<textarea id="url_text" rows="15" cols="47" alt="">url_text</textarea>

1瓷马、圖片直接上傳

JS:

var form = new FormData();
form.append("file", $("#file").prop('files')[0]);
$.upload("fastdfs/upload-mu",form,function (url) {
    $("#img").attr("src",url);
    $("#url_text").text("因為是直接上傳的圖片拴还，可以直接訪問的路徑：\n"+url);
});

JAVA:

@PostMapping("fastdfs/upload-mu")
public ResultVo<String> upload(@RequestParam("file") MultipartFile file) throws Exception {
    String visitUrl = fdfsClient.uploadFile(file);
    return new ResultVo(visitUrl);
    //返回一個http://localhost/group1/M00/xxxx/xxx.jpg
}

將圖片直接上傳到服務器，返回的URL可以直接訪問到圖片

2欧聘、圖片轉base64字符串上傳

var file = $("#file")[0].files[0];
var exName = file.name.substr(file.name.lastIndexOf('.')+1);
getBase64ByImg(file,function (dataURL) {
    $("#url_text").text(dataURL);
    $("#img").attr("src",dataURL);
    var data = {
        "base64Text":dataURL,
        "exName":exName
    }
    $.send("fastdfs/upload-base64",data,"post",function (result) {
        $("#url_text").text("因為是上傳的base64字符串片林，不可以直接訪問，需要解碼：\n"+result);
    });
});
        
        
function getBase64ByImg(img, callback) {
    var reader = new FileReader();
    var AllowImgFileSize = 2100000; //上傳圖片最大值(單位字節(jié))（ 2 M = 2097152 B ）超過2M上傳失敗
    if (img) {
        //將文件以Data URL形式讀入頁面
        reader.readAsDataURL(img);
        reader.onload = function (e) {
            if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
                alert( '上傳失敗怀骤，請上傳不大于2M的圖片费封！');
                return;
            }else{
                //執(zhí)行上傳操作
                console.log("圖片轉base64完成:");
                console.log(reader.result);
                callback(reader.result);
            }
        }
    }
}

JAVA:

@PostMapping("fastdfs/upload-base64")
public ResultVo<String> uploadBase64(@RequestBody FastdfsFile image) {
    String visitUrl = fdfsClient.uploadFile(image.getBase64Text(),image.getExName());
    return new ResultVo(visitUrl);
    //返回一個http://localhost/group1/M00/xxxx/xxx.jpg,但不能直接訪問
}

@Data
public class FastdfsFile {
    /**  base64 字符串 */
    private String base64Text;
    /**  文件拓展名 */
    private String exName;
    /**  fastdfs訪問路徑 */
    private String visitUrl;
    /**  文件id 用于訪問fastdfs */
    private String fileId;
}

因為是上傳的base64字符串，不可以直接訪問

3蒋伦、Base64字符串上傳后訪問

圖片通過 MultipartFile 上傳后可以直接訪問弓摘，但轉base64字符串后卻不能直接訪問，這里介紹2鐘方法痕届。

3.1 通過web服務器下載訪問

JS:

var data = {
    "visitUrl":url //剛剛上傳base64字符串返回的不能直接訪問的URL
};
$.send("fastdfs/download-base64",data,"post",function (data) {
    $("#url_text").text(data);
    $("#img").attr("src",data);
});

Java:

@PostMapping("fastdfs/download-base64")
public ResultVo<String> downloadase64(@RequestBody FastdfsFile image, HttpServletResponse response) throws Exception{
    byte[] data = fdfsClient.download(image.getVisitUrl()
        .substring(image.getVisitUrl().indexOf("group")));
    return new ResultVo(new String(data);
    //返回了可直接顯示的base64字符串
}

3.2 JS直接訪問文件服務器解碼

JS：

//url為不能直接訪問的鏈接
getBase64ByURL(url,function (base64) {
    $("#url_text").text(base64);
    $("#img").attr("src",base64);
});

function getBase64ByURL(url, callback) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.crossOrigin = 'anonymous'
    request.responseType = 'blob';
    request.onload = function () {
        var reader = new FileReader();
        reader.readAsText(request.response);
        reader.onload = function (e) {
            var base64img = e.target.result;
            console.log(base64img);
            callback(base64img);
        };
    };
    request.send();
};

注意韧献，這種方法需要文件服務器支持跨域。

Java與文件服務器（FastDFS）之間訪問都用的 fileId研叫，即group1/M00/00/00/xxx.jpg 這一串

自己去掉 http://host:port/contextPath/

Over