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();
                }
  • 相关阅读:
    20180320作业2:进行代码复审训练
    20180320作业1:源代码管理工具调查
    软工作业PSP与单元测试练习
    软工课后作业01-P18第四题
    20180320作业2:进行代码复审训练
    判断传入的电子邮箱账号的正确性
    软工课后作业01-00365
    实现模块判断传入的电子邮箱账号的正确性
    个人介绍
    20180320作业2:进行代码复审训练
  • 原文地址:https://www.cnblogs.com/zonglonglong/p/12683446.html
Copyright © 2011-2022 走看看