文件流上傳

<input type="file" id='imgBlob' @change='changeImgBlob' /><script>function changeImgBlob(e){ // 文件流: e.target.files[0]// 將文件流放在一個(gè)formData對(duì)象內(nèi)，formDate本質(zhì)是一個(gè)鍵值對(duì)的表單const fd = new FormData();fd.append("files",e.target.files[0]);fd.append("token",xxxxx); // 根據(jù)需求來(lái)可以放一些其他數(shù)據(jù)// 通過(guò)接口將數(shù)據(jù)發(fā)向后臺(tái)axios({url: "/yoorUrl", //URL,根據(jù)實(shí)際情況來(lái)method: "post",headers: { "Content-Type": "multipart/form-data" },data: fd});// 將文件流對(duì)象轉(zhuǎn)為blob格式，可用于預(yù)覽img.src = window.URL.createObjectURL(file.files[0]);} </script>

Base64上傳

<input type="file" id='imgBlob' @change='changeImgBase' /><script>function changeImgBase(e){// 通過(guò)FileReader將文件流轉(zhuǎn)為base64格式const file = new FileReader();// 將文件處理為base64，此操作為異步file.readAsDataURL(e.target.files[0]);// 事先做好文件轉(zhuǎn)換異步完后邏輯的處理file.onloadend = function (e) {// e.target.result 可獲得base64內(nèi)容// 上傳后臺(tái)axios({url: '/yoorUrl', //URL,根據(jù)實(shí)際情況來(lái)method: 'post',data: {files: e.target.result,}});};} </script>

文件格式轉(zhuǎn)換

// File、Blob 轉(zhuǎn)化成 dataURL，上面Base64上傳有寫(xiě) // File基于blob封裝 // dataURL(base64)轉(zhuǎn)化成 Blob(二進(jìn)制)對(duì)象 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 文件數(shù)據(jù)繪制到 canvas // 思路：File, Blob ——> dataURL ——> canvasfunction fileAndBlobToCanvas(fileDataURL) {let img = new Image()img.src = fileDataURLlet 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) // 主要調(diào)用此方法return canvasDataURL }

總結(jié)

以上是生活随笔為你收集整理的js文件上传及格式装换的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。