码迷,mamicode.com
首页 > Web开发 > 详细

el-upload怎么拿到上传的图片的base64格式

时间:2017-12-07 20:52:10      阅读:845      评论:0      收藏:0      [点我收藏+]

标签:效果   总结   object   图片   onload   upload   alt   png   item   

这里只是本地上传,拿图片的base64,并不向后台直接上传,拿到base64后手动上传

上传前效果:

技术分享图片

上传后效果:

技术分享图片

 

 .vue

       <el-form-item label="礼品封面">
              <el-upload
                class="avatar-uploader"
                action=""
                :show-file-list="false"
                :auto-upload="false"
                :on-change="changeFile">
                <img id="giftImg" v-if="imageUrl" :src="imageUrl" class="avatar">
                <el-button v-else slot="trigger" size="small" type="primary">选取文件</el-button>
              </el-upload>
            </el-form-item>

 

.ts

  changeFile(file, fileList) {
    var This = this;
    //this.imageUrl = URL.createObjectURL(file.raw);
    var reader = new FileReader();
    reader.readAsDataURL(file.raw);
    reader.onload = function(e){ 
        this.result // 这个就是base64编码了
        This.imageUrl = this.result;
    }
  }

 

 有些东西就是试出来的,然后总结,~~~

 

el-upload怎么拿到上传的图片的base64格式

标签:效果   总结   object   图片   onload   upload   alt   png   item   

原文地址:http://www.cnblogs.com/XHappyness/p/8000643.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!