精华内容
下载资源
问答
  • Vue中图片转base64格式
    千次阅读
    2021-01-12 16:58:35

    1.首先在main.js中写一个函数并将函数挂载在全局变量中

    // 图片转base64格式 挂载在全局
    Vue.prototype.$base64Img = (e) => {
      return new Promise(function (resolve, reject) { // 使用Promise进行异步处理
        let fileSize = 0
        const fileMaxSize = 1024 // 设置图片最大为 1M
        fileSize = e.target.files[0].size // 获取图片大小
        const size = fileSize / 1024
        const file = e.target.files[0] // 获取图片文件对象
        const reader = new FileReader() // 实例化一个对象
        if (size > fileMaxSize) {
          e.target.value = '' // 内容清空
          resolve({ err: '图片大小必须小于1M' })
        } else if (size <= 0) {
          e.target.value = '' // 内容清空
          resolve({ err: '图片大小大小不能为0M' })
        } else {
          reader.readAsDataURL(file) // 把图片文件对象转换base64
          reader.onload = function (e) {
            resolve(e.target.result) // 回到函数返回base64值
          }
        }
      })
    }

    2. 在组件中的代码是

    <template>
      <div class="register">
        <!-- PC端点击打开文件选择图片 -->
          <label for="img">
            <input type="button" id="btn" value="请上传识别图像" >
            <span id="text"></span>
            <input type="file" name="img" id="img" @change="handleFile"><br /><br />
          </label>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        handleFile (e) {
          var filePath = document.querySelector('#img').value
          var arr = filePath.split('\\')
          document.querySelector('#text').innerHTML = arr[arr.length - 1]
          this.$base64Img(e).then((res) => { // 调用全局方法
            console.log(res) // 控制台打印出图片base64值
          })
        }
      },
      mounted () {
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .register{
      height: 100%;
      width: 100%;
      background: url('http://ahnu.co.cnki.net/Themes/default/images/loginBg.jpg') no-repeat;
      background-size: 105% 100%;
      padding-top: 200px;
    }
    .imagefile{
      width: 100%;
    }
    
    label{
      position: relative;
    }
    #img{
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
    }
    #btn{
      margin-right: 5px;
      padding: 5px 10px;
      background: #00b0f0;
      color: #FFF;
      border: none;
      border-radius: 5px;
    }
    #text{
      color: black;
    }
    
    </style>
    

    3.当你点击文件上传后,就可以实现本地图片转base64格式

    更多相关内容
  • 对于前端人员来说,图片处理...针对这种问题,这里我推荐使用图片转base64格式,再发给后端,后端只需将转码结果存入数据库即可,前端调用接口直接获取到base64数据直接写入img src 标签即可 下面使用element ui upload
  • 主要介绍了Vue项目pdf(base64)转图片遇到的问题及解决方法,需要的朋友可以参考下
  • 主要介绍了vue项目base64字符串转图片的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue 图片转base64格式方法总结

    千次阅读 2022-02-11 15:13:12
    直入主题,上代码(其实用的还是FileReader) 主要方法 handleRemove(file, fileList) { console.log(file); var reader = new FileReader(); reader.readAsDataURL(file.raw);... console.log("file base64

    直入主题,上代码(其实用的还是FileReader)
    主要方法

    handleRemove(file, fileList) {
          console.log(file); 
          
          var reader = new FileReader();
          reader.readAsDataURL(file.raw); // 一定要传入file格式  
          reader.onload = () => {
            console.log("file 转 base64结果:" + reader.result);
          };
          reader.onerror = function(error) {
            console.log("Error: ", error);
          };
    },
    

    vue组件

    <!--  -->
    <template>
      <div>
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-change="handleRemove"
          multiple
          :limit="3"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>
    </template>
    
    <script>
    export default {
      name: "",
      data() {
        return {};
      },
      methods: {
        handleRemove(file, fileList) {
          console.log(file);
          var reader = new FileReader();
          reader.readAsDataURL(file.raw);
          reader.onload = () => {
            console.log("file 转 base64结果:" + reader.result);
          };
          reader.onerror = function(error) {
            console.log("Error: ", error);
          };
        },
      }
    };
    </script>
    <style scoped>
    /* @import url(); 引入css类 */
    </style>
    
    

    在这里插入图片描述


    注意:
    今天在使用Vue进行文件上传的代码编写时,发现报错:
    Error in v-on handler: "TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'."
    `在这里插入图片描述
    显然,是传入的file对象出了问题,根据报错提示,我们应该传入一个Blob对象。也就是说,file不是Blob对象
    在这里插入图片描述

    我们使用console.log(file)进行调试输出:
    在这里插入图片描述
    看, raw这个属性写了个大大的File

    把raw这个File对象传入即可
    在这里插入图片描述
    OK啦!!!
    在这里插入图片描述

    展开全文
  • 昨天在项目开发遇到了一个需要展示多张图片到一个容器的需求,每张图片在鼠标移入时都要更换图片路径,展示一个新的图片,由于每张图片大小都在2~6kb之间,webpack配置了图片在10kb以内自动转换base64,所有就...
  • vue-cli3.0图片打包,小于10k的图片没有自动转base64问题处理
  • const Base64 = require('js-base64').Base64 new Vue({ el: '#app', Base64 }) 3:在需要转码的文件使用 const Base64 = require('js-base64').Base64 const exStr = Base64.encode('base64') console.log...
  • 图片转Base64上传案例一、前端图片转Base64二、后台Base64转图片三、前端Base64转图片 一、前端图片转Base64 获取图片,将图片转为Base64字符串,AJAX提交到后台进行处理,前端使用了Vue基础。 在这里插入代码片 二...

    一、前端图片转Base64

    获取图片,将图片转为Base64字符串,AJAX提交到后台进行处理,前端使用了Vue基础。但是这种做法会比较复杂,后续会使用vant框架实现。

    <!--上传图片-->
    <div style="width: 90%;margin-left: 5%;margin-top: 30px">
            <div class="pics" v-for='(value, key) in imgs' style="text-align:center;float: left;width: 19%;">
                <div class="onepicdiv" style="float:left;width: 100%;">
                    <div>
                        <img class="onepic" :id=key :src="getObjectURL(value)" style="width: 85%;" @click="showImgs(value)">
                    </div>
                    <div @click="delImg(key)" style="color: #999999;width: 100%;font-size: 13px;color: #999999;position: relative;top: -63px;left: 26px">
                        <van-icon name="close" color="rgb(0,0,0)"/>
                    </div>
                </div>
            </div>
            <div v-if="imgLen>=5 ? false : true">
                <div class="addpicture">
                    <input id="myfile" type="file" @change="addImg" ref="inputer" multiple accept="image/*"
                           style="opacity:0;width: 100%;"/>
                </div>
            </div>
            <div style="font-size: 10px;padding-top: 40px;color: #999999">&nbsp;&nbsp;{{imgLen}}/5</div>
        </div>
        
    <!--放大图片时被放大的图片和图片列表之间的遮罩层-->
    <div id="showpicmask">
        <div v-show="show" @click="back()"
             style="position: fixed;z-index: 100;height: 100vh;width: 100%;background-color: rgba(0,0,0,0.95) ">
        </div>
    </div>
    
    <!--被放大的图片-->
    <div id="showpic">
        <div v-show="show" @click="back()"
             style="position: fixed;z-index: 101;width:100%;height: 100vh;display: flex;float: left;align-items: center;justify-content: center;">
            <img :src="picpath" style="width: 100vw;">
        </div>
    </div>
    
    <script>
    //上传图片
    addImg(event) {
        let inputDOM = this.$refs.inputer;
        // 通过DOM取文件数据
        this.fil = inputDOM.files;
    
        let oldLen = this.imgLen;
        let len = this.fil.length + oldLen;
        if (len > 5) {
            alert('最多可上传5张,您还可以上传' + (5 - oldLen) + '张');
            return false;
        }
        for (let i = 0; i < this.fil.length; i++) {
            let size = Math.floor(this.fil[i].size / 1024);
            if (size > 3 * 1024) {
                layer.msg('请选择3M以内的图片');
                return false;
            }
            for(key in this.imgs){
                if(key == this.fil[i].name){
                    layer.msg("请勿上传同一张图片")
                    return
                }
            }
            this.imgLen++;
            this.$set(this.imgs, this.fil[i].name , event.target.files[i]);
    
            //转换为base64
            let self = this;
            let reader = new FileReader();
            reader.readAsDataURL(event.target.files[i]);
            if (size > 1024) {//图片大于1M,进行压缩
                if (typeof (FileReader) === 'undefined') {
                    console.log("当前浏览器内核不支持base64图标压缩");
                    //调用上传方式  不压缩
                } else {
                    var file = event.target.files[i];
                    if (!/image\/\w+/.test(file.type)) {
                        alert("请确保文件为图像类型");
                        return false;
                    }
                    //压缩图片
                    reader.onload = function (event) {
                        if (reader.readyState === 2) {
                            let image = new Image()     //新建一个img标签(不嵌入DOM节点,仅做canvas操作)
                            image.src = event.target.result;    //让该标签加载base64格式的原图
                            image.onload = function () {
                                let canvas = document.createElement('canvas'), //创建一个canvas元素
                                    context = canvas.getContext('2d'),    //context相当于画笔,里面有各种可以进行绘图的API
                                    imageWidth = image.width / 2,    //压缩后图片的宽度,这里设置为缩小一半
                                    imageHeight = image.height / 2,    //压缩后图片的高度,这里设置为缩小一半
                                    data = ''    //存储压缩后的图片
                                canvas.width = imageWidth    //设置绘图的宽度
                                canvas.height = imageHeight    //设置绘图的高度
                                //使用drawImage重新设置img标签中的图片大小,实现压缩。drawImage方法的参数可以自行查阅W3C
                                context.drawImage(image, 0, 0, imageWidth, imageHeight)
                                //使用toDataURL将canvas上的图片转换为base64格式
                                data = canvas.toDataURL('image/jpeg')
                                var st = data.indexOf(',');
                                var stnew = parseInt(st) + 1;
                                data = data.substring(stnew);
                                self.$set(self.filelist, self.fil[i].name, data);
                            };
                        }
                    }
                }
            } else {
                reader.onload = function (event) {
                    self.headImg = event.target.result; //img base64
                    var st = self.headImg.indexOf(',');
                    var stnew = parseInt(st) + 1;
                    self.headImg = self.headImg.substring(stnew);
                    self.$set(self.filelist, self.fil[i].name, self.headImg);
                }
            }
        }
    
    },
    getObjectURL(file) {
        const that = this;
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    },
    //删除图片
    delImg(key) {
        const that = this;
        this.$delete(that.filelist, key);
        this.$delete(this.imgs, key);
        this.imgLen--;
    },
    //放大图片
    showImgs(value) {
        var url = this.getObjectURL(value);
        picmask.show = true
        showpic.show = true
        showpic.picpath = url
    },
    </script>
    

    二、后台Base64转图片

    后台获取前端Base64字符串,这里在后台转换为图片,存放到指定目录,并将新定义的图片名保存至数据库

    //DataObject.java用于存储key-value类型数据的数据结构
    //DataStore.java用于存储列表格式数据的数据结构。
    //图片处理
    DataObject objfile= DataObject.parseJSON(files);
    DataStore fileds = DataStore.getInstance();
    Set<String> keySet = objfile.keySet();// vdo里的键都是string
    Iterator<String> it = keySet.iterator();// 开始遍历
    String key;// vdo的键
    Object value;// 值(数据类型待判断)
    int n=0;
    while (it.hasNext()) {
        key = it.next();
        value = objfile.get(key);
        if (value instanceof String) {
            //System.out.println("key=="+key +",value="+value);
            fileds.put(n, "imgname", key);
            fileds.put(n, "imgbase", value);
        } else {
            throw new BizException("files不是一个String类型的值");
        }
        n++;
    }
    if(fileds.rowCount()>0){
        DataObject returnobj = DataObject.getInstance();
        DataStore urlds = DataStore.getInstance();
        for (int j = 0; j < fileds.rowCount(); j++) {
            String imgStr = fileds.getString(j, "imgbase");
            String FILEPATH = picurl + suggestImgs;
            Calendar tempewmscsj = Calendar.getInstance();
            long sjid = tempewmscsj.getTimeInMillis();
            String idstr = String.valueOf(sjid);
            String nowstr = DateUtil.getCurrentTime();
            String fileName = "img_" + nowstr + "_" + idstr + ".jpg";
            fileNames = fileNames + ";" + fileName;
            //对字节数组字符串进行Base64解码并生成图片
            String imgUrl = "";
            //图像数据为空
            if (StringUtils.isBlank(imgStr)) {
                returnobj.put("retuendata", imgUrl);
            }
            BASE64Decoder decoder = new BASE64Decoder();
            byte[] b = decoder.decodeBuffer(imgStr);
            for (int i = 0; i < b.length; ++i) {
                //调整异常数据
                if (b[i] < 0) {
                    b[i] += 256;
                }
            }
            //文件目录不存在则创建
            File outFile = new File(FILEPATH);
            if (!outFile.exists()) {
                outFile.mkdirs();
            }
            //文件最终的存储位置
            File dest = new File(FILEPATH + File.separator + fileName);
            //判断目标文件所在的目录是否存在
            if (!dest.getParentFile().exists()) {
                //创建目录
                if (!dest.getParentFile().mkdirs()) {
                    returnobj.put("retuendata", imgUrl);
                }
            }
            //新生成的图片
            imgUrl = FILEPATH + File.separator + fileName;
            //这种写法不需要flush或者close 会自动关闭 FileOutputStream 实现了java中的java.lang.AutoCloseable接口。
            try (OutputStream out = new FileOutputStream(FILEPATH + File.separator + fileName);) {
                out.write(b);
            } catch (Exception e) {
                //logger.info("Base64Util GenerateImage e:" + e.getLocalizedMessage());
            } finally {
                returnobj.put("retuendata", imgUrl);
            }
            urlds.put(j, "imgurl", returnobj.getString("retuendata"));
        }
    }
    //数据库中存放新定义的图片名等信息
    ...
    

    三、前端Base64转图片

    如果选择第二步在后台直接存储Base64字符串到数据库,则可以在前端把Base64转为图片

    let file = img.src; // 把整个base64给file
    let name = filename + ".png"; // 定义文件名字(例如:cober.png)
    var type = "image/png"; // 定义图片类型(canvas转的图片一般都是png,也可以指定其他类型)
    let conversions = base64ToBlob(file, type); // 调用base64转图片方法
     
    // conversions 就是转化之后的图片文件,
     
    function base64ToBlob(urlData, type) {
        let arr = urlData.split(',');
        let mime = arr[0].match(/:(.*?);/)[1] || type;
        // 去掉url的头,并转化为byte
        let bytes = window.atob(arr[1]);
        // 处理异常,将ascii码小于0的转换为大于0
        let ab = new ArrayBuffer(bytes.length);
        // 生成视图(直接针对内存):8位无符号整数,长度1个字节
        let ia = new Uint8Array(ab);
        for (let i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }
        return new Blob([ab], {
            type: mime
        });
    },
    
    展开全文
  • vue网络图片转base64

    千次阅读 2020-04-21 10:29:31
    单张图片转Base64 <script> methods: { //异步执行 imageUrlToBase64() { //一定要设置为let,不然图片不显示 let image = new Image(); //解决跨域问题 image.setAttribute('crossOrigin'...

    单张图片转Base64

    <script>
        methods: {
    		//异步执行
    		imageUrlToBase64() {
    			//一定要设置为let,不然图片不显示
    			let image = new Image();
    	
    			//解决跨域问题
    			image.setAttribute('crossOrigin', 'anonymous');
    			
    			let imageUrl = "http://img1.imgtn.bdimg.com/it/u=4012470373,3540768040&fm=26&gp=0.jpg";
    			image.src = imageUrl
    	
    			let that = this;
    			//image.onload为异步加载
    			image.onload = () => {
    				var canvas = document.createElement("canvas");
    				canvas.width = image.width;
    				canvas.height = image.height;
    				var context = canvas.getContext('2d');
    				context.drawImage(image, 0, 0, image.width, image.height);
    				
    				var quality = 0.8;
    				//这里的dataurl就是base64类型
    				var dataURL = canvas.toDataURL("image/jpeg", quality);//使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png,因为压缩成png后base64的字符串可能比不转换前的长!
    			
    			}
    		},
    	}
    </script>
    
    

    多张图片转Base64

    <script>
      data() {
        return {
       	 base64Datas: [],
        }
    	methods: {
    		imageUrlToBase64(){
    			let data = [
    				"http://bigf.cqugeo.cn/landslip/res/defaultImages/default.png",
    				"http://bigf.cqugeo.cn/landslip/res/defaultImages/default.png",
    				"http://bigf.cqugeo.cn/landslip/res/defaultImages/default.png"
    			]
    			this.imageUrlToBase64(data, 1, data.length);
    		},
    	
    		//采用递归同步执行
    		onloadImg(data, i, len) {
    	
    			//一定要设置为let,不然图片不显示
    			let image = new Image();
    	
    			//解决跨域问题
    			image.setAttribute('crossOrigin', 'anonymous');
    			
    			let imageUrl = "http://bigf.cqugeo.cn/landslip/res/defaultImages/default.png";
    			image.src = imageUrl
    	
    			let that = this;
    			//image.onload为异步加载
    			image.onload = () => {
    				var canvas = document.createElement("canvas");
    				canvas.width = image.width;
    				canvas.height = image.height;
    				var context = canvas.getContext('2d');
    				context.drawImage(image, 0, 0, image.width, image.height);
    				
    				var quality = 0.8;
    				//这里的dataurl就是base64类型
    				var dataURL = canvas.toDataURL("image/jpeg", quality);//使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png,因为压缩成png后base64的字符串可能比不转换前的长!
    				
    				//数组存放图片base64
    				that.base64Datas.push(dataURL);
    				
    				//递归执行图片url转base64
    				i = i + 1;
    				if (i <= len) {
    					that.onloadImg(data1, i, len)
    				}
    			
    			}
    		},
    	}
    </script>
    
    
    展开全文
  • 图片file转Base64编码格式 imageToBase64 (file) { var reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => { console.log('file base64结果:' + reader.result) this....
  • VUE图片转Base64

    千次阅读 2021-05-18 09:37:51
    // 把图片转为base64格式 imageToBase64 () { let that = this //防止function里指代不明确 let image = new Image() image.crossOrigin = '' image.src = this.imageUrl image.onload = function () { that....
  • vue网络图片url转Base64

    千次阅读 2020-04-09 15:18:33
    单张图片转Base64 <script> methods: { //异步执行 imageUrlToBase64() { //一定要设置为let,不然图片不显示 let image = new Image(); //解决跨域问题 image.setAttribute('crossOrigin'...
  • 使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = “blob”] 使用FileReader 对象接收blob <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta ...
  • 点击按钮然后选择电脑里的图片,下面列表会进行图片的预览展示,提交表单便会提交图片的信息(通常是将图片转换成base64编码存入数据库) 实现步骤 <el-upload list-type="picture" action='' accept=".jpg, ....
  • 手把手教你使用canvas 手写签名,并上传图片,cancas 自动是生成文字, 签名需要用的到技术基本包含, 尽量不让你懂脑子,拿过来就用,(上传图片接口需要修改)上传图片转base64 base64转文件, 上传图片使用...
  • 说明:实际项目需要我们将图片转为base64作为一个字段保存,下面我们来探究下如何实现一个图片base64的上传及修改 1.最终效果 图片上传 图片修改 2.布局 <el-form-item label="图标" prop="icon"> <...
  • 1、创建imgUrlToBase64.js文件 ... let base64Url = ""; let image = new Image(); image.setAttribute("crossOrigin", "anonymous");//解决跨域问题 image.src = imgUrl; image.onload = function
  • 可以作为一个公共方法,看自己需求,需要传入一个上传成功的图片ile文件 const imgupload = (file, ... //文件base64化,以便获知图片原始尺寸 reader.onload = function (e) { typeof callback === 'functio..
  • Vue图片转化为base64

    千次阅读 2021-11-09 11:11:46
    在div写入上传文件的input 框 下面是script export default { methods: { File() { let file = this.$refs.upFile.files[0]; var reader = new FileReader(); reader.readAsDataURL(file... 以上就是转换base64的方法了
  • vue 图片转base64本地路径跨域

    千次阅读 2020-05-16 18:17:29
    getUrlBase64(url, ext, callback) { var canvas = document.createElement("canvas"); //创建canvas DOM元素 var ctx = canvas.getContext("2d"); var img = new Image; img.crossOrigin =
  • vue 上传图片转base64数据流发送给后端 1.在这个方法里边参数file 2.在handleAvatarSuccess 这个发布方法里边这样写 3.如果报这个错误就这样写打印出来file依次类推 "TypeError: Failed to execute '...
  • vue图片网络地址转base64格式

    千次阅读 2020-07-20 16:49:17
    vue中将图片网络地址转base64格式 bannerToBase64(imgUrl) { // 一定要设置为let,不然图片不显示 const image = new Image(); // 解决跨域问题 image.setAttribute('crossOrigin', 'anonymous'); const ...
  • 但是在使用vue-quill-editor有一个致命的问题,vue-quill-editor默认插入图片是直接将图片转为base64再放入内容,如果图片比较大的话,富文本的内容就会很大,即使图片不大,只要图片较为多,篇幅较长,富文本的...
  • 内联图片即使把图片文件编码成base64,优点是可以减少http的请求,缺点是不能跨域缓存,用html5的file api里的 readAsDataURL函数 这是一个把文件转化成base64编码
  • vue.config.js process.env.NODE_ENV === 'production':生产环境生效 limit: 5000:图片文件小于5kb则转换 chainWebpack: config => { config.module .rule('images') .use('url-loader') .loader('url-...
  • ') } return isJPG && isLt2M }, getFile (file, fileList) { this.getBase64(file.raw).then(res => { this.monsterList[fileList.id - 1].img = res for (var i = 0; i ; i++) { axios.post('/api/xxxxx', { XXX:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,047
精华内容 9,618
关键字:

vue中图片转base64