blob和base64轉(zhuǎn)文件并通過ajax上傳到服務(wù)器

tuomao 發(fā)布于2019-08-26 10:42 / 1147人閱讀

摘要：有時(shí)候，我們不想通過上傳本地圖片的方式上傳圖片，而是通過相機(jī)拍照，將這個(gè)拍照后的圖片直接上傳到服務(wù)器上，不需要保存到本地。現(xiàn)在我們來通過的或者方法對(duì)象對(duì)象來通過上傳圖片。

有時(shí)候，我們不想通過上傳本地圖片的方式上傳圖片，而是通過相機(jī)拍照，將這個(gè)拍照后的圖片直接上傳到服務(wù)器上，不需要保存到本地。
比如，用video模擬一個(gè)攝像頭，通過webrtc調(diào)用攝像頭的方式拍一張照，然后通過canvas通過getContext("2d")獲取的繪圖對(duì)象CanvasRenderingContext2D的drawImage(video, x, y, width, heigth)方法將video圖像通過canvas直接畫到html頁(yè)面上，用來呈現(xiàn)拍照后的結(jié)果。
通常的做法是用

的方式上傳圖片的。但這種方式是要求圖片具體存在的，本地或者url路徑上的。
現(xiàn)在我們來通過canvas的toDataURL或者toBlob方法、File對(duì)象、FormData對(duì)象來通過ajax上傳圖片。

第二種方式，通過base64轉(zhuǎn)碼，這里只看js代碼
這是canvas調(diào)用toDataURL方法將圖片base64編碼

let base64 = canvas.toDataURL();    // 同樣通過canvas的toDataURL方法將canvas圖片Base64編碼

let bstr = atob(base64.split(",")[1]);    // atob是將base64編碼解碼，去掉data:image/png;base64,部分
let n = bstr.length;
let u8arr = new Uint8Array(n);

while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
}

// 寫法同上
let file2 = new File([u8arr], "a.jpg", {type: "image/jpg"})

let formData = new FormData()
formData.append("file", file2)
console.log(formData)

$.ajax({
    url: "/a",
    type: "POST",
    processData: false,
    contentType: false,
    cache: false,
    data: formData,
    success(res) {
        console.log("上傳完成!")
    }
})

其上兩種寫法皆可
下面是后臺(tái)代碼，這里用的是java

@Controller
public class IndexCtronller {

    @RequestMapping(value = "/a", method = RequestMethod.POST)
    public ResponseEntity index(MultipartFile file) {    // 通過MultipartFile對(duì)象接收文件
        String contextPath = "C:UsersdaggerDesktop";    // 上傳文件路徑
        File file1 = new File(contextPath, "a.jpg");
        try {
            file.transferTo(file1);    // 將文件保存到服務(wù)器桌面
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }
}