zoukankan      html  css  js  c++  java
  • 图片预览 base64 element 图片上传 预览图

    https://www.jianshu.com/p/bee8c393c422 感谢

    使用了element ui,愿望是   选择图片文件之后,不立即上传,先显示预览图,点击上传按钮之后再上传,element版本是2.13

    用到了 URL.createObjectURL(file.raw)

    html

                  <el-upload
                              class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                              ref="upload"
                              :show-file-list="false"
                              :auto-upload="false"
                              :on-success="handleAvatarSuccess"
                              :before-upload="beforeAvatarUpload"
                              :on-change="onchange"
                              >
                              <img v-if="form.img" :src="form.img" class="avatar">
                              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <el-button type="success" style="margin-left: 10px;" @click="upimg">上传</el-button>

    js

    onchange:function(file,filelist){
                    let fileName = file.name;
                    let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
                    if (regex.test(fileName.toLowerCase())) {
                        // console.log(URL.createObjectURL(file.raw))
                        Vue.set(this.form,"img",URL.createObjectURL(file.raw))//新版本需要这么做,老版本好像file或者filelist里面直接就有url,使用Vue.set是应为需要重新渲染
                    } else {
                        this.$message.error('请选择图片文件');
                    }
                }

    接着是图片转为base64,一下和上面的无关,就是搜到了在这里做个记录

    function img264(imgUrl){
                    let that = this
                    window.URL = window.URL || window.webkitURL;
                          var xhr = new XMLHttpRequest();
                          xhr.open("get", imgUrl, true);
                          // 至关重要
                          xhr.responseType = "blob";
                          xhr.onload = function () {
                            if (this.status == 200) {
                              //得到一个blob对象
                              var blob = this.response;
                              console.log("blob", blob)
                              // 至关重要
                              let oFileReader = new FileReader();
                              oFileReader.onloadend = function (e) {
                                let base64 = e.target.result;
                                console.log("方式一》》》》》》》》》", base64)
                                // that.form.img = base64
                                that.$set(form,"img",base64)
                              };
                              oFileReader.readAsDataURL(blob);
                              
                     
                            }
                          }
                          xhr.send();
                }
  • 相关阅读:
    .NET XmlNavigator with Namespace
    编程要素
    【FOJ】1962 新击鼓传花游戏
    【POJ】1389 Area of Simple Polygons
    【POJ】2482 Stars in Your Window
    【HDU】3265 Posters
    【HDU】1199 Color the Ball
    【HDU】3642 Get The Treasury
    【HDU】4027 Can you answer these queries?
    【HDU】1542 Atlantis
  • 原文地址:https://www.cnblogs.com/zonglonglong/p/12683446.html
Copyright © 2011-2022 走看看