文件流上传和回显图片

接收文件流回显图片

1 img = 'data:image/jpeg;base64,' + Img

上传文件流图片

 1  2                     :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
 3                     if="ImageAddress" :src="ImageAddress" class="avatar">
 4                     
else>
 5                     
 6                         
 7                         上传图标
 8                     
 9                     
10 

 1 //   上传图标
 2       handleAvatarSuccess(res, file) {
 3           console.log("file1111111111:",file);
 4         this.ImageAddress = URL.createObjectURL(file.raw);
 5       },
 6       beforeAvatarUpload(file) {
 7         console.log("file:", file);
 8         const isJPG = file.type === 'image/jpeg';
 9         const isLt2M = file.size / 1024 / 1024 < 2;
10 
11         if (!isJPG) {
12           this.$message.error('上传图片只能是 JPG 格式!');
13           return false
14         }
15         if (!isLt2M) {
16           this.$message.error('上传图片大小不能超过 2MB!');
17           return false
18         }
19         var _this = this;
20         _this.ImageAddress = file.name
21         //定义一个文件阅读器   
22         //var FileName=file.name;
23         //console.log(FileName);
24         var reader = new FileReader();
25         //文件装载后将其显示在图片预览里
26         reader.onload = function (e) {
27           _this.ImageAddress = reader.result;//将bade64位图片保存至数组里供上面图片显示
28           console.log("_this.ImageAddress111111111:",_this.ImageAddress);              
29           _this.MeterTypeForm.ImageAddress=_this.ImageAddress.split("base64,")[1]
30           console.log("_this.ImageAddress:",_this.ImageAddress);              
31         }
32         reader.readAsDataURL(file);
33 
34         // console.log(typeof file)
35         //   this.ImageAddress = 'data:image/jpeg;base64,' + file
36         
37         return true
38       }