??

????????<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

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

????????}