vue中將圖片轉(zhuǎn)為base64碼(筆記)

??

????????<img?src=""?alt=""?ref="demoImg">

????????<input?type="file"?ref="file"?name="file"?@change="demo">


????????demo(e){????//預(yù)覽圖片?并將圖片轉(zhuǎn)為base64碼傳給后臺?

????????????let?file?=?e.target.files[0]

????????????let?reader?=?new?FileReader()

????????????if(file.type?==?'image/jpg'){

????????????????this.$message.error('上傳頭像圖片只能是?jpg?格式!');

????????????????this.$refs['file'].value?=?''

????????????????return

????????????}

????????????if(file.size/1024/1024?<?2){

????????????????this.$message.error('上傳頭像圖片大小不能超過?2MB!');

????????????????this.$refs['file'].value?=?''

????????????????return

????????????}

????????????reader.readAsDataURL(file)? ? //將結(jié)果轉(zhuǎn)為url,使得img的src可以使用

????????????reader.onload?=?(e)?=>?{

????????????????console.log(e.target.result)????????????????

????????????????console.log(e.target.result.split(',')[1])??//圖片的base64碼

????????????????this.$refs['demoImg'].src?=?e.target.result;//轉(zhuǎn)為url后的結(jié)果?賦給img的src

????????????}

????????}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。