vue实现多张图片上传与预览

2021-03-08 21:27

阅读：516

标签：label ack 取图图片 fileread eth 图片路径 click 上传

方法1：

html:

-if=‘imgsback.length>0‘ class="flex">

数据：

data(){

return{

　　　　 imgsback: [], // 图片预览地址

imgfilesback: [], // 图片原文件，上传到后台的数据

sizeback: 1 , // 限制上传数量

｝

方法methods:

fileChangeback(e) { // 加入图片

var _this = this

var event = event || window.event;

var file = event.target.files

var leng=file.length;

for(var i=0;i

var reader = new FileReader(); // 使用 FileReader 来获取图片路径及预览效果

_this.imgfilesback.push(file[i])

reader.readAsDataURL(file[i]);

reader.onload =function(e){

_this.imgsback.push(e.target.result); // base 64 图片地址形成预览

};

}

方法2：

vue实现多张图片上传与预览

标签：label ack 取图图片 fileread eth 图片路径 click 上传

原文地址：https://www.cnblogs.com/meiyanstar/p/12870711.html

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：vue实现多张图片上传与预览
文章链接：http://soscw.com/index.php/essay/61984.html

亲，登录后才可以留言！