Vue图片上传预览

骑猪看日落 2022-05-08 09:24 426阅读 0赞

# Vue图片上传预览 #

### 想要的效果 ###

*  ![zUO9bbB.png][]

### 代码实现 ###

*  页面核心代码
    
     
    
        <h3>添加新图：</h3>
        <img src="" alt="" id="portrait" style="width: 300px;height: 200px;background-color: #eeeeee"/>
        <input type="file" id="saveImage" name="myphoto" accept="image/png,image/gif,image/jpeg"
               ref="new_company_image">
        <el-button @click="addImage">确认添加</el-button>
 *  script核心代码
    
     *  方法代码
        
         
        
            great: function () {
                document.getElementById('saveImage').onchange = function () {
                    var imgFile = this.files[0];
                    var fr = new FileReader();
                    fr.onload = function () {
                        document.getElementById('portrait').src = fr.result;
                    };
                    fr.readAsDataURL(imgFile);
                }
            }
     *  挂载上述方法
        
         
        
            mounted: function () {
                this.great();
            }

### 测试运行 ###

*  ![zJWcxjL.png][]
 *  ![zUO9bbB.png][]

[zUO9bbB.png]: https://i.imgur.com/zUO9bbB.png
[zJWcxjL.png]: https://i.imgur.com/zJWcxjL.png

发表评论取消回复

表情：

评论列表（有 0 条评论，426人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app上传图片，预览

uni-app上传图片，预览 \\uni.chooseImage(obj)\\上传图片 count 上传个数最多默认选择张数是9 `sizeType` 上传

超、凢脫俗/ 2022年12月23日 14:23/ 0 赞/ 124 阅读

相关 JavaScript上传图片前预览

纯JavaScript上传图片前预览 <table width="100%" border="0" cellspacing="0" cellpadding="0">

女爷i/ 2022年08月21日 05:59/ 0 赞/ 274 阅读

相关 Ext图片上传之预览 .

在进行图片上传时，通常需要进行预览。而这种预览的行为通常是预览客户端的本地资源。下面就讲一下在Ext中是如何实现图片上传预览的。首先，创建为预览图片创建一个控件： xty

Myth丶恋晨/ 2022年06月18日 05:48/ 0 赞/ 273 阅读

相关 jquery 实现图片上传预览

jquery 实现图片上传预览 1.如下代码就能实现： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

蔚落/ 2022年06月05日 01:57/ 0 赞/ 374 阅读

相关 js上传图片预览

function imgFile(file){ file.change(function(){ var current_img=this.file

本是古典何须时尚/ 2022年05月22日 03:34/ 0 赞/ 381 阅读

相关 Vue图片上传预览

Vue图片上传预览想要的效果 ![zUO9bbB.png][] 代码实现页面核心代码 <h3

骑猪看日落/ 2022年05月08日 09:24/ 0 赞/ 427 阅读

相关图片预览与上传

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

小鱼儿/ 2022年04月24日 10:50/ 0 赞/ 505 阅读

相关一个图片上传预览

一、一个按钮上传文件操作前台选择文件，只能通过input的file类型的文件选择框操作。但有时却为了界面的美观，要求用按钮来完成。第一步、隐藏文件选择框第二步、

╰半橙微兮°/ 2022年04月08日 11:56/ 0 赞/ 521 阅读

相关上传图片并预览

HTML： <input accept="image/" name=" fileImage" type="file" onchange="upload"> <

Myth丶恋晨/ 2021年11月23日 10:16/ 0 赞/ 679 阅读

相关 extjs上传图片预览

[EXTJS图片上传预览(含本地上传前预览和服务器图片预览)][EXTJS] 创建EXTJS组件 ![复制代码][copycode.gif] 1 //生成me

系统管理员/ 2021年09月10日 07:04/ 0 赞/ 712 阅读