鍍金池/ 問(wèn)答/網(wǎng)絡(luò)安全  HTML/ 用node.js接受前端傳過(guò)來(lái)的base64圖片,怎辦保存在后臺(tái)?

用node.js接受前端傳過(guò)來(lái)的base64圖片,怎辦保存在后臺(tái)?

        //過(guò)濾圖片url
        let base64 = imgSrc.replace(/^data:image\/\w+;base64,/, "")
        //把圖片轉(zhuǎn)換成buffer對(duì)象
        let dataBuffer = new Buffer(base64, 'base64')
        //保存圖片的地址是
        let path = 'static/upload/image'+'.jpg'
        //保存圖片
        fs.writeFile(path,dataBuffer,(err) => {
            if(err) {
                console.log(err)
            }else {
                console.log('保存圖片成功')
            }
        })

我的做法:
1.首先將base64圖片的url過(guò)濾掉前面的data:image...字符串
2.將過(guò)濾的圖片轉(zhuǎn)為二進(jìn)制
3.用fs保存到后臺(tái)

但是保存成功后的圖片無(wú)法解析(如圖),那我怎么在前端再獲取圖片呢?
這樣前端獲取的圖片就顯示不出來(lái)了,因?yàn)閳D片無(wú)法解析。是不是我保存的方式不對(duì),要怎么做?

clipboard.png

回答
編輯回答
吢丕

1。硬要使用base64保存的話,就不需要再轉(zhuǎn)化到二進(jìn)制了,直接保存base字符串。
2。因?yàn)槟闳绻蟼鲌D片,為什么要把圖片編碼之后再上傳最后又解碼?,這樣就很皮。
如2。所述,只需要編碼和解碼,不包括轉(zhuǎn)化為2進(jìn)制,所以你的操作得不到最后的jpeg圖片

2017年5月23日 19:13
編輯回答
乖乖瀦
2018年4月3日 12:07
編輯回答
柒喵

已經(jīng)找到圖片無(wú)法解析的原因了,base64編碼,使用express接收POST值后,base64編碼字符串中的“+”號(hào)被替換成空格了,引起編碼出錯(cuò),img.src = base64Data;直接把nodejs服務(wù)掛掉。如果你出現(xiàn)類似問(wèn)題,請(qǐng)console.log(base64Data);看字符串是否有空格。

解決辦法:

將空格替換回“+”號(hào)

var base64Data = imgData.replace(/s/g,"+");

2017年10月22日 12:19