element upload预览_vue+element上传图片并显示预览图

html代码：

:show-file-list="false"

:on-success="handleAvatarSuccess"

:on-change="onchange" :multiple="true">

js代码：

//上传图片

onchange:function(file, fileList){

var _this=this;

var event = event || window.event;

var file = event.target.files || event.dataTransfer.files;

console.log(file);

var len=file.length;

var initlen = $(".editS_ul li").length -1;//原有的图片数目

console.log(initlen);

if(len+initlen>=10){

len = 10 - initlen;

this.upJia=false;

}

if(len == undefined || len == 0){

return false;

}

for(var i=0;i_this.fileList.push(file[i]); //将传入的图片push到空对象中

_this.reads(file[i]);

console.log(_this.fileList);//onchange事件一共选中的人数

}

}，

//生成预览图

reads:function(file) {

var _this=this;

//定义一个文件阅读器

// var FileName=file.name;

// console.log(FileName);

var reader = new FileReader();

//文件装载后将其显示在图片预览里

reader.onload = function (e) {

_this.aImgurl.push(reader.result);//将bade64位图片保存至数组里供上面图片显示

// console.log(_this.aImgurl);

}

reader.readAsDataURL(file);

}

element upload预览_vue+element上传图片并显示预览图相关推荐

element upload预览_vue element upload实现图片本地预览
vue使用element实现本地预览,最主要的是将图片路径转换为base64,供大家参考,具体内容如下 HTML class="avatar-uploader" action=&q ...
anguarjs 上传图片预览_JS控制上传图片个数，预览上传图片
一共是2个函数 //这个函数的作用预览上传的图片 function fileView(filesObj){ //显示上传图片预览 var view=document.querySelector(&qu ...
element ui 菜单封装_vue+element UI实现多级导航菜单
1.前言在某次日常开发中,项目要求页面的导航菜单需要动态加载,即菜单不能在页面上写死,菜单上的数据由后端开发从数据库中获取返回给前端使用,前端拿到数据后再通过解析数据最终将菜单渲染出来.由于菜单有可 ...
简单实现前端选择上传图片并显示略缩图
效果实现代码 <!DOCTYPE html> <html> <head><meta charset="UTF-8"><tit ...
Element Upload 上传图片
最近跟element结下不解之缘,很多地方用到组件. 这篇文章主要记录使用Element Upload 上传图片组件的过程. Upload 上传图片组件:https://element.eleme.c ...
java 上传图片，图片预览，2种方法
java 上传图片,图片预览,2种方法 1. 方法一:将图片上传到特定磁盘 html页面,form表单内容: <div class="layui-form-item"> ...
HTML添加上传图片并进行预览
使用说明:新建文件,直接复制粘贴,保存文件为html 格式,在浏览器运行即可: 第一种: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tr ...
OSS上传图片无法在线预览的解决方案
OSS上传图片无法在线预览的解决方案参考文章: (1)OSS上传图片无法在线预览的解决方案 (2)https://www.cnblogs.com/tian874540961/p/12058544.h ...
【vue开发问题-解决方法】（九）使用element upload自定义接口上传文件，input多文件上传
[vue开发问题-解决方法](九)使用element upload自定义接口上传文件,input多文件上传参考文章: (1)[vue开发问题-解决方法](九)使用element upload自定义接 ...

element upload预览_vue+element上传图片并显示预览图

element upload预览_vue+element上传图片并显示预览图相关推荐

最新文章

热门文章