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