您的当前位置:首页vue.js 图片上传并预览及图片更换功能的实现代码
广告

vue.js 图片上传并预览及图片更换功能的实现代码

2023-12-07 来源:哗驼汽车网

这里讲解是图片上传和图片预览。主要是围绕我们常用功能的列子做讲解 ,并且没有格外引入其他js 所以你复制过去做简单修改便可以看到效果

效果图:

样式以及效果图一并展示

1.HTML

<div class="rz-picter"> <img :src="avatar" class="img-avatar"> <input type="file" name="avatar" id="uppic" accept="image/gif,image/jpeg,image/jpg,image/png" @change="changeImage($event)" ref="avatarInput" class="uppic"> </div>

2.js

data() { return { avatar: require('../assets/jia.jpg'), } },

图片一定要以require 的方式引入 这里的图片仅用来美化 并不是上传的图片

3.js 写方法

 changeImage(e) { var file = e.target.files[0] var reader = new FileReader() var that = this reader.readAsDataURL(file) reader.onload = function(e) { that.avatar = this.result } },

就这么几段代码一个上传功能就写好了

4.切记我这里用了css来将input  type = file 的样式重新优化了,并且将图片做了定位 所以点击中间图片就可以触发上传

你需要你的需求去定义你的样式

5.运用原生javascript我做了一个判断图片是否上传的的判断

if(document.getElementById('uppic').value.length == '') { Toast('请上传图片'); return }

6.附上css代码

 .uppic { height: 3rem; width: 6rem; margin: 0 auto; opacity: 0; z-index: 99999; } .img-avatar { position: absolute; }

附上写此功能所有代码

<template> <div class="renzheng"> <div class="rz-notice" v-bind:style="{ display: isno}"> <p>名片用来鉴别是相关人员,温馨提示:<img src="../assets/static/img-icon/lan_cha.png" @click="hiddenwords"></p> </div> <van-tabs v-model="active" swipeable> <van-tab v-for="(item,index) in navArr" :title="item.name" class="v-tab"> <div v-if="index==0"> <div class="color-black" style="text-align: center;margin-top: 0.4rem;">请上传本人名片照片</div> <div class="rz-picter"> <img :src="avatar" class="img-avatar"> <input type="file" name="avatar" id="uppic" accept="image/gif,image/jpeg,image/jpg,image/png" @change="changeImage($event)" ref="avatarInput" class="uppic"> </div> <div class="cuxian"></div> <div class="my-content-list"> <div class="color-black"><span style="margin-right: 0.6rem;">真实姓名:</span><input v-model="yoursname" placeholder="请输入您的真实姓名" /></div> </div> <div class="my-content-list"> <div class="color-black"><span style="margin-right: 0.6rem;">手机号码:</span><input type="number" max="11" v-model="yoursphone" placeholder="请输入您的手机号码" /></div> </div> <div class="yzbtn" @click="submitBtn"> 立即认证 </div> </div> <div v-if="index==1"> <div class="color-black" style="text-align: center;margin-top: 0.4rem;">请上传本人身份证照片</div> <div class="rz-picter"> <img src="../assets/jia.jpg" /> <p>上传人像页</p> </div> <div class="rz-picter"> <img src="../assets/jia.jpg" /> <p>上传国辉页</p> </div> <div class="cuxian"></div> <div class="my-content-list"> <div class="color-black"><span style="margin-right: 0.6rem;">真实姓名:</span><input placeholder="请输入您的真实姓名" /></div> </div> <div class="my-content-list"> <div class="color-black"><span style="margin-right: 0.6rem;">手机号码:</span><input type="number" placeholder="请输入您的手机号码" /></div> </div> <div class="yzbtn"> 立即认证 </div> </div> </van-tab> </van-tabs> </div></template><script> import { Tab, Tabs } from 'vant'; import { Toast } from 'vant' export default { name: 'renzheng', data() { return { yoursname: '', yoursphone: '', avatar: require('../assets/jia.jpg'), isno: 'block', active: 0, navArr: [{ name: "身份认证" }, { name: "实名认证" } ], } }, methods: { hiddenwords() { this.isno = 'none' }, submitBtn() { if(this.yoursname == '') { Toast("请填写你的真实姓名"); return; } if(this.yoursphone == '' || this.yoursphone == null) { Toast("请填写你的手机号码"); return; } if(document.getElementById('uppic').value.length == '') { Toast('请上传图片'); return; } }, changeImage(e) { var file = e.target.files[0] var reader = new FileReader() var that = this reader.readAsDataURL(file) reader.onload = function(e) { that.avatar = this.result } }, }, mounted: function() { } }</script><style> .rz-notice { padding: 0.2rem 0.3rem; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background: #F0F5FB; color: #28D9EF; } .rz-notice img { height: 0.22rem; width: 0.22rem; } .rz-picter { height: 3rem; width: 6rem; margin: 0.3rem auto; border: 0.01rem solid #ededed; display: flex; flex-direction: column; align-items: center; justify-content: center; } .uppic { height: 3rem; width: 6rem; margin: 0 auto; opacity: 0; z-index: 99999; } .img-avatar { position: absolute; } /*立即验证*/ .yzbtn { width: 90%; height: 0.8rem; background: #FF6600; border-radius: 0.06rem; margin: 30px auto; text-align: center; line-height: 0.8rem; color: #FFFFFF } /*修改原有tab样式*/ .van-tab { color: #A3A3A3!important; } .van-tab--active { color: #000!important; } .van-tabs__line { background-color: #FF6600!important; width: 0.7rem!important; text-align: center!important; align-items: center; margin-left: 1.5rem; } .van-toast { background-color: #FF6600; color: #FFFFFF } .my-content-list { padding: 0.3rem; display: flex; flex-direction: row; justify-content: space-between; border-bottom: 0.01rem solid #EDEDED; }</style>

总结

以上所述是小编给大家介绍的vue.js 图片上传并预览及图片更换功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

小编还为您整理了以下内容,可能对您也有帮助:

图片自动切换的JS代码

试试这个图片切换

有12345数字一起切换

鼠标点一下数字会变换到另一张图片,不点就会自动换

里面有教程和源码

参考资料:http://www.blueidea.com/common/shoutbox/redir.asp?4=p&id=10895

图片自动切换的JS代码

试试这个图片切换

有12345数字一起切换

鼠标点一下数字会变换到另一张图片,不点就会自动换

里面有教程和源码

参考资料:http://www.blueidea.com/common/shoutbox/redir.asp?4=p&id=10895

我需要一个js或者jquery能批量上传图片+预览的功能。急~~~急~~~急~~

Web Uploader 项目,符合你的要求。

1、引入资源

使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。

<!--引入CSS-->

<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">

<!--引入JS-->

<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>

<!--SWF在初始化的时候指定,在后面将展示-->

2、Html

首先需要准备一个按钮,和一个用来存放添加的文件信息列表的容器。

<!--dom结构部分-->

<div id="uploader-demo">

    <!--用来存放item-->

    <div id="fileList" class="uploader-list"></div>

    <div id="filePicker">选择图片</div>

</div>

3、Javascript

创建Web Uploader实例// 初始化Web Uploader

var uploader = WebUploader.create({

    // 选完文件后,是否自动上传。

    auto: true,

    // swf文件路径

    swf: BASE_URL + '/js/Uploader.swf',

    // 文件接收服务端。

    server: 'http://webuploader.app.com/server/fileupload.php',

    // 选择文件的按钮。可选。

    // 内部根据当前运行是创建,可能是input元素,也可能是flash.

    pick: '#filePicker',

    // 只允许选择图片文件。

    accept: {

        title: 'Images',

        extensions: 'gif,jpg,jpeg,bmp,png',

        mimeTypes: 'image/*'

    }

});

监听fileQueued事件,通过uploader.makeThumb来创建图片预览图。

PS: 这里得到的是Data URL数据,IE6、IE7不支持直接预览。可以借助FLASH或者服务端来完成预览。

// 当有文件添加进来的时候

uploader.on( 'fileQueued', function( file ) {

    var $li = $(

            '<div id="' + file.id + '" class="file-item thumbnail">' +

                '<img>' +

                '<div class="info">' + file.name + '</div>' +

            '</div>'

            ),

        $img = $li.find('img');

    // $list为容器jQuery实例

    $list.append( $li );

    // 创建缩略图

    // 如果为非图片文件,可以不用调用此方法。

    // thumbnailWidth x thumbnailHeight 为 100 x 100

    uploader.makeThumb( file, function( error, src ) {

        if ( error ) {

            $img.replaceWith('<span>不能预览</span>');

            return;

        }

        $img.attr( 'src', src );

    }, thumbnailWidth, thumbnailHeight );

});

然后剩下的就是上传状态提示了,当文件上传过程中, 上传成功,上传失败,上传完成都分别对应uploadProgress, uploadSuccess, uploadError, uploadComplete事件。

// 文件上传过程中创建进度条实时显示。

uploader.on( 'uploadProgress', function( file, percentage ) {

    var $li = $( '#'+file.id ),

        $percent = $li.find('.progress span');

    // 避免重复创建

    if ( !$percent.length ) {

        $percent = $('<p class="progress"><span></span></p>')

                .appendTo( $li )

                .find('span');

    }

    $percent.css( 'width', percentage * 100 + '%' );

});

// 文件上传成功,给item添加成功class, 用样式标记上传成功。

uploader.on( 'uploadSuccess', function( file ) {

    $( '#'+file.id ).addClass('upload-state-done');

});

// 文件上传失败,显示上传出错。

uploader.on( 'uploadError', function( file ) {

    var $li = $( '#'+file.id ),

        $error = $li.find('div.error');

    // 避免重复创建

    if ( !$error.length ) {

        $error = $('<div class="error"></div>').appendTo( $li );

    }

    $error.text('上传失败');

});

// 完成上传完了,成功或者失败,先删除进度条。

uploader.on( 'uploadComplete', function( file ) {

    $( '#'+file.id ).find('.progress').remove();

});

更多细节,请查看js源码。

哗驼汽车网还为您提供以下相关内容希望对您有帮助:

vue2.x,element-ui 中上传图片组件(图片查看,已有图片渲染)

beforeUpload文件上传前执行,参数为上传的文件file,如果返回false或者返回Primary且被reject,则停止上传       handlePictureCardPreview图片预览时触发,参数为上传的文件file,&amp;...

Asp.net图片上传实现预览效果的简单代码

复制代码 代码如下: &lt;asp:FileUpload ID="FileUpload " runat="server" onpropertychange="show(this value)"/&gt; &lt;asp:Image ID="Image " runat="server" /&gt; 在上传控件中写onpropertychange="show(this val...

vue.js怎么实现图片轮播?就是一个图片隔一秒换一张,不用别的功能

你开个定时器,一秒换一个img的src不就行了?随便写了个:new Vue({el:"#app",data:{pic:["./images/1.jpg","./images/2.jpg","./images/3.jpg","./images/4.jpg","./images/5.jpg"],i:"0",now:...

vue-pdf.js 在线预览问题

最近修改公司vue项目中使用pdf.js来实现在线预览上传的各类文件.由于使用pdf.js在预览时是直接在标签内将src属性赋值为要请求的地址.这就导致一个问题,会直接请求服务器的文件路径地址,而这个服务器文件路径就会暴露出来。处于...

p5.js如何进行图片加载

方法是:①点击编辑器左上角的小三角展开文件目录。②点击文件目录右上角小三角,展开菜单后Add File。③可以直接将图片文件拖到框里,会自动上传,传完后关闭即可,jpg和png格式均支持。二、加载图片接着,添加代码如下:...

VUE+UEditor图片跨域上传怎样实现

..一不小心就可以用了 解决方案:上传单图片的时后端不直接返回JSON,而是重定向到前端页面前端:VUE后端:WAMP + ThinkPHP5.0前端http://localhost:88881、去官网下载UEditor到vue中,打开ueditor.config.js配置服务器路径...

用JavaScript实现“上传并预览图片”时,默认浏览器Firefox无法获得图片...

不过有很多变通或先进的方法来实现 例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法 具体可以参考这个图片上传预览效果 参考资料:http://www.blueidea.com/common/shoutbox/redir.asp?7=u&amp;id=11586 ...

采用vue框架的网页都会有vue的图标吗

ico(注:必须改名),放到我们项目中的static文件夹下。分别在webpack.prod.conf.js和webpack.dev.conf.js里面配置ico图标路径:添加代码:favicon: path.resolve('static/img/favicon.ico') // 设置网站图标,即可。

vuePress里面怎么写vue.js代码

5)vuePress可添加js代码 既然是尤大大的作品 那肯定是支持vue语法的在MD文件中直接写入js的语法 export default{//...do something} 6)代码发布或上传至服务器 关于发布问题:首先我们知道在打包后的文件都是静态文件之前的...

vuebanner-Vue实现轮播图

使用vue作出锤子官方商城的3d-banner效果 利用js获取鼠标指针位置,根据位置计算偏转角度,通过设定css中transform的perspective/rotateX/rotateY使banner呈现3d偏转的效果。首先,写一个div 并给他一些基本的样式 接下来引入vue 并...

Top