element upload预览_vue element upload实现图片本地预览

vue使用element实现本地预览，最主要的是将图片路径转换为base64，供大家参考，具体内容如下

HTML

class="avatar-uploader"

action="123" //这个路径不重要，可以随便写

:show-file-list="false"

:on-success="handleAvatarSuccess"

:on-change="onchange"

:before-upload="beforeAvatarUpload">

js部分

export default {

data() {

return {

imageUrl: '',

};

methods: {

handleAvatarSuccess(res, file) {

this.imageUrl = URL.createObjectURL(file.raw);

beforeAvatarUpload(file) {

const isJPG = file.type === 'image/jpeg';

const isLt2M = file.size / 1024 / 1024 < 2;

if (!isJPG) {

this.$message.error('上传头像图片只能是 JPG 格式!');

}

if (!isLt2M) {

this.$message.error('上传头像图片大小不能超过 2MB!');

}

return isJPG && isLt2M;

//当上传图片后，调用onchange方法，获取图片本地路径

onchange(file,fileList){

var _this = this;

var event = event || window.event;

var file = event.target.files[0];

var reader = new FileReader();

//转base64

reader.onload = function(e) {

_this.imageUrl = e.target.result //将图片路径赋值给src

}

reader.readAsDataURL(file);

}

现在就可实现图片本地预览了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网

element upload预览_vue element upload实现图片本地预览相关推荐

vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
javascript显示本地服务器图片,JavaScript图片本地预览功能的实现方法
这篇文章主要介绍了JavaScript实现图片本地预览功能,针对非IE浏览器的HTML5滤镜功能及IE浏览器的相关组件功能实现不上传至服务器预览本地图片的效果,需要的朋友可以参考下本文实例讲述了Ja ...
element upload预览_vue+element上传图片并显示预览图
html代码: :show-file-list="false" :on-success="handleAvatarSuccess" :on-change=&qu ...
element ui背景图_vue项目elementUi照片墙图片预览
背景:后端返回的数据是个图片的url的数组,但是这个url是无法直接作为图片预览的,需要每次去调接口获取真正的url 一.template页面 id="selectfiles" : ...
element ui 菜单封装_vue+element UI实现多级导航菜单
1.前言在某次日常开发中,项目要求页面的导航菜单需要动态加载,即菜单不能在页面上写死,菜单上的数据由后端开发从数据库中获取返回给前端使用,前端拿到数据后再通过解析数据最终将菜单渲染出来.由于菜单有可 ...
input选择视频或图片本地预览问题
图片目前可以用两个方法,示例是vue代码,原生用的话需要小改下预览图片 1 <input id="filepicker" @change="chooseImgIn ...
element upload预览_element-ui上传组件图片默认不上传显示图片缩略图
新入职公司,新团队实训练手项目,后端没有提供单独的图片上传接口,需要用form/data 形式表单字段和图片文件一起提交,element UI 的上传组件默认需要启用action. 在选取图片文件后为 ...
Java实现图片裁剪预览功能
Java实现图片裁剪预览功能在项目中,我们需要做些类似头像上传,图片裁剪的功能,ok看下面文章! 需要插件:jQuery Jcrop 后端代码: package org.csg.upload;imp ...
ajax：html5上传文件，上传之前可以实现本地预览
本主题主要涉及两个新内容: 1.上传文件(主要使用了FormData) 2.本地预览(主要使用了FileReader) html5的FormData其实就是平时的Form表单,只是html5可以直接新 ...

element upload预览_vue element upload实现图片本地预览

element upload预览_vue element upload实现图片本地预览相关推荐

最新文章

热门文章