<template>
<div class="vue-upload-img-multiple">
<div v-if="images.length >0">
<ul>
<li v-for="image in images">
<img :src="data:image" @click='delImage($index)' />
<a href="#" style="position: absolute;" @click='delImage($index)'>
<span class="glyphicon glyphicon-remove"></span>
</a>
</li>
</ul>
<button @click="removeImage">移除全部图片</button>
<button @click='addPic' >上传</button>
</div> <div>
<div v-if="!image">
<h2>Select an image</h2>
<input type="file" @change="onFileChange">
</div>
<div v-else>
<img :src="data:image" />
<button @click="removeImage">Remove image</button>
</div>
</div> </div>
</template> <script>
export default {
name: 'Upload',
data: function () {
return {
images: []
}
},
methods: {
test () {
var vm = this
console.log(vm.message)
},
addPic () {
$('input[type=file]').trigger('click')
return false
},
onFileChange (e) {
var files = e.target.files || e.dataTransfer.files
if (!files.length) return
this.createImage(files)
},
createImage (file) {
var vm = this
var reader = null
var leng = file.length
for (var i = 0; i < leng; i++) {
reader = new window.FileReader()
reader.readAsDataURL(file[i])
reader.onload = function (e) {
vm.images.push(e.target.result)
}
}
},
removeImage: function (e) {
this.images = []
},
delImage: function (index) {
this.images.shift(index)
}
}
}
</script> <style lang="scss">
h1, h2 {
font-weight: normal;
} ul {
list-style-type: none;
padding: 0;
} li {
display: inline-block;
margin: 0 10px;
} a {
color: #42b983;
}
.vue-upload-img-multiple{
border:1px red solid;
}
</style>

vue2 上传图片的更多相关文章

  1. vue2上传图片到OSS

    第一步:安装阿里云OSS <!-- 引入在线资源 --> <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk- ...

  2. h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

  3. vue2.0集成百度UE编辑器,上传图片报错!!!

    我这边配置进去之后,界面加载,文本输入都没有问题,就是上传图片会有问题 这张图, 左边红色框框 就是目录结构咯, 右边红色框框 就是各种网上教程给出的第一个路径配置对吧, 下面的就是绿色 服务器接口配 ...

  4. Vue2 全家桶仿 微信App 项目,支持多人在线聊天和机器人聊天

    前言 这个项目是利用工作之余写的一个模仿微信app的单页面应用,整个项目包含27个页面,涉及实时群聊,机器人聊天,同学录,朋友圈等等,后续页面还是开发中.写这个项目主要目的是练习和熟悉vue和vuex ...

  5. vue-axios配置token,上传图片

    vue1.0用 vue-resource 目前不维护了 vue2.0用 axios 使用 1.安装axios, npm install axios 2.在main.js中配置 import axios ...

  6. Vue2 后台管理系统解决方案

    基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案. github地址:https://github.com/lin-xin/manage-system demo地址:ht ...

  7. Vue2.0结合webuploader实现文件分片上传

    Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...

  8. CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法

    因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...

  9. vue2.0路由-路由嵌套

    vue一个重要的方面就是路由,下面是自己写的一个路由的例子: 1.引入依赖库就不必再说 2.创建组件 两种写法 第一种:间接 <template id="home"> ...

随机推荐

  1. 经典功率谱估计及Matlab仿真

    原文出自:http://www.cnblogs.com/jacklu/p/5140913.html 功率谱估计在分析平稳各态遍历随机信号频率成分领域被广泛使用,并且已被成功应用到雷达信号处理.故障诊断 ...

  2. JS实现关闭当前子窗口,刷新父窗口

    一.JS实现关闭当前子窗口,刷新父窗口 JS代码如下: <script> function refreshParent() {  window.opener.location.href = ...

  3. datetimepicker一个不错的日历android特效

    datetimepicker一个不错的日历效,选中和选择日历效果都很不错, 实用的时候直接可以把datetimepicker-library这个引入到项目,调用的地方在实现 TimePickerDia ...

  4. 简单又高效的Access分页语句

    转自:http://www.ljf.cn/archives/2281 Access实现分页其实也可以在查询语句里面做. 除了流行的top分页法之外,其实还有一种更简单,更容易理解,并且效率也不低的分页 ...

  5. css中外边距合并

    最近在布局时遇到一个有趣的问题 <style> #div1{width:200px;height:200px;background:red;}  #div2{width:50px;heig ...

  6. log4j相对路径找不到,处理方法

    http://blog.csdn.net/u012345283/article/details/40821833?utm_source=tuicool&utm_medium=referral

  7. SQL语言

    SQL语言的分类:DDL DML DQL DCL SQL中的操作无非就是(增删改查) DDL:Data Query Language,数据查询语言! 主要是用来定义和维护数据库的各种操作对象,比如库. ...

  8. IT青年深圳销售求职经历

    今年五月份,辞掉了一份月薪5k ,没有加班,双休,福利不错的IT工作,我始终觉得这样的工作太过平稳,没有任何激情,虽然没想好接下来的路怎么走,但是最终我还是选择了裸辞.在所在的城市玩了半个月,算是作最 ...

  9. The processing instruction target matching ''[xX][mM][lL]" is not allowed

    报错的来源是: <?xml version="1.0" encoding="UTF8"?> 解决方案::,一般是WSDL的头文件的格式出了问题,比如 ...

  10. git 记住密码

    http://yourname:password@git.oschina.net/name/project.git