快捷導(dǎo)航

vue實(shí)現(xiàn)圖片路徑轉(zhuǎn)二進(jìn)制文件流(binary)

更新時(shí)間：2022年06月02日 10:39:42 作者：showkw

這篇文章主要介紹了vue實(shí)現(xiàn)圖片路徑轉(zhuǎn)二進(jìn)制文件流(binary)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

圖片路徑轉(zhuǎn)二進(jìn)制文件流(binary)

vue項(xiàng)目中，需要將本地的圖片或前端生成的圖片傳回后端，傳回給后端需要將圖片路徑轉(zhuǎn)換為二進(jìn)制文件流，也就是參數(shù)中顯示的(binary)，這時(shí)就需要進(jìn)行圖片路徑的轉(zhuǎn)換。

圖片路徑轉(zhuǎn)換為Base64

imageUrlToBase64(imageUrl) {
? let image = new Image() // 一定要設(shè)置為let，不然圖片不顯示
? image.setAttribute('crossOrigin', 'anonymous') // 解決跨域問題
? image.src = imageUrl +"&v=" + Math.random()
? image.onload = () => {
? ? var canvas = document.createElement("canvas")
?? ?canvas.width = image.width
?? ?canvas.height = image.height
?? ?var context = canvas.getContext('2d')
?? ?context.drawImage(image, 0, 0, image.width, image.height)
?? ?var quality = 0.8
?? ?var dataURL = canvas.toDataURL("image/jpeg", quality) // 使用toDataUrl將圖片轉(zhuǎn)換成jpeg的格式,不要把圖片壓縮成png，因?yàn)閴嚎s成png后base64的字符串可能比不轉(zhuǎn)換前的長(zhǎng)！
? ? this.base64toFile(dataURL)
? }
}

Base64轉(zhuǎn)換為二進(jìn)制文件流(binary)

base64toFile (dataurl, filename = 'file') {
? let arr = dataurl.split(',')
? let mime = arr[0].match(/:(.*?);/)[1]
? let suffix = mime.split('/')[1]
? let bstr = atob(arr[1])
? let n = bstr.length
? let u8arr = new Uint8Array(n)
? while (n--) {
? ? u8arr[n] = bstr.charCodeAt(n)
? }
? let file = new File([u8arr], `${filename}.${suffix}`, {
? ? type: mime
? })
? console.log(file)
}

下載二進(jìn)制流文件

平時(shí)在前端下載文件有兩種方式，一種是后臺(tái)提供一個(gè) URL，然后用 window.open(URL) 下載；另一種是后臺(tái)直接返回文件的二進(jìn)制內(nèi)容，然后前端轉(zhuǎn)化再下載，下面主要說的是第二種實(shí)現(xiàn)方式

Blob、ajax(axios)

mdn 上是這樣介紹 Blob 的：

Blob 對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類文件對(duì)象。Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)

具體使用

axios({
? method: 'post',
? url: '/export',
})
.then(res => {
? // 假設(shè) data 是返回來的二進(jìn)制數(shù)據(jù)
? const data = res.data
? const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
? const a = document.createElement('a')
? a.href = url
? a.click()
? // const link = document.createElement('a')
? // link.style.display = 'none'
? // link.href = url
? // link.setAttribute('download', 'excel.xlsx')
? // document.body.appendChild(link)
? // link.click()
? // document.body.removeChild(link)
})

打開下載的文件，一堆亂碼…一定有哪里不對(duì)。

最后發(fā)現(xiàn)是參數(shù) responseType 的問題，responseType 它表示服務(wù)器響應(yīng)的數(shù)據(jù)類型，由于后臺(tái)返回來的是二進(jìn)制數(shù)據(jù)，所以我們要把它設(shè)為 arraybuffer，接下來再看看結(jié)果是否正確。

axios({
? method: 'post',
? url: '/export',
? responseType: 'arraybuffer',
})
.then(res => {
? // 假設(shè) data 是返回來的二進(jìn)制數(shù)據(jù)
? const data = res.data
? const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
? const a = document.createElement('a')
? a.href = url
? a.click()
? // const link = document.createElement('a')
? // link.style.display = 'none'
? // link.href = url
? // link.setAttribute('download', 'excel.xlsx')
? // document.body.appendChild(link)
? // link.click()
? // document.body.removeChild(link)
})

這次沒有問題，文件能正常打開，內(nèi)容也是正常的，不再是亂碼。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: