vue使用readAsDataURL实现选择图片文件后预览

vue实现选择图片文件后预览

利用h5的api可以实现选择文件并实现预览

readAsDataURL

方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成DONE,并触发 loadend 事件,同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容

方式引入vue文件

<script src="./vue.js"></script>

文件选择框,并添加change事件,和dom操作ref

 <input type="file" @change="uploadImg" ref="img" />

添加一个用于显示预览的img标签

<img id="img" />

实例化vue并完成操作

var vm = new Vue({
        el: '#app',
        methods: {
        //change事件
            uploadImg(el) {
                //根据ref得到图片文件
                var file = this.$refs.img;
                //使用h5的读取文件api
                var reader = new FileReader();
                reader.readAsDataURL(file.files[0]);
                //读取完成后触发
                reader.onload = function () {
                //改变img的路径
                    document.querySelector("img").src = this.result;
                };
            }
        },
    })

效果

完整代码

林中小屋

更多内容关注我的个人博客林中小屋

原文地址:https://www.cnblogs.com/mjsmry/p/11620946.html

时间: 2024-10-07 01:51:29

vue使用readAsDataURL实现选择图片文件后预览的相关文章

本地选择图片文件进行预览

思路:对于支持 window.url 的浏览器 使用 url= window.url.createObjectURL(file); img.src = url; 不支持window.url 的ie 使用:div.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='"+完整文件名+"')" 栗子: fileInput.onchange =

Html5选择图片并及时预览图片

以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览,使用Html5选择图片并及时预览图片的代码如下,使用起来更爽了. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta name="author" content="EdieLei" /> <titl

关于图片上传时选择图片以后生成图片预览

实现选择图片之后生成预览图 <script type="text/javascript">    //下面用于多图片上传预览功能    function setImagePreviews() {        //获取选择图片的对象        var docObj = document.getElementById("filesid");        //后期显示图片区域的对象        var dd = document.getElement

html选择图片后预览,保存并上传

html代码: <input type="file" id="file" style="display:none;"> <img src="" width="200px" height="200px" id="img-change"> <button id="btn">保存图片</button> js

搞清Image加载事件(onload)、加载状态(complete)后,实现图片的本地预览,并自适应于父元素内

onload与complete介绍 complete只是HTMLImageElement对象的一个属性,可以判断图片加载完成,不管图片是不是有缓存:而onload则是这个Image对象的load事件回调,当图片加载完成后执行onload绑定的函数. 给下面一个例子,解释下: document.getElementById('load').onclick = function() { var img = new Image(); img.src="images/avatar.png";

html,图片上传预览,input file获取文件等相关操作

input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 var path=obj.value;//获取文件当前路径 var size=obj.files[0].size;//获取文件大小 var prefix=path.substring( path.lastIndexOf('\\')+1 );//获取文件名的前缀名(文件格式) var suffix=path.

Java绘制图片生成图片文件进行预览

Java绘制图片并实现打印前生成图片文件进行预览, 适用于开发阶段. 如果要使用界面完成预览,请另找资源.这里用这个功能主要是用于结果预览,因为如果使用打印来进行结果验证,会浪费大量的纸张. Java代码: import java.awt.Color;import java.awt.Dimension;import java.awt.Font;import java.awt.Graphics;import java.awt.Graphics2D;import java.awt.Image;imp

图片预览 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/&

JS实现图片上传预览效果:方法一

<script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) { //判断浏览器是否有FileReader接口 if(typeof FileReader =='undefined') { /*$("#images_show").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口