转载

 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://www.jq22.com/jquery/vue.min.js"></script>
<style>
.upload_warp_img_div_del {
position: absolute;
top: 6px;
width: 16px;
right: 4px;
}
.upload_warp_img_div_top {
position: absolute;
top: 0;
width: 100%;
height: 30px;
background-color: rgba(0, 0, 0, 0.4);
line-height: 30px;
text-align: left;
color: #fff;
font-size: 12px;
text-indent: 4px;
}
.upload_warp_img_div_text {
white-space: nowrap;
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
}
.upload_warp_img_div img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.upload_warp_img_div {
position: relative;
height: 100px;
width: 120px;
border: 1px solid #ccc;
margin: 0px 30px 10px 0px;
float: left;
line-height: 100px;
display: table-cell;
text-align: center;
background-color: #eee;
cursor: pointer;
}
.upload_warp_img {
border-top: 1px solid #D2D2D2;
padding: 14px 0 0 14px;
overflow: hidden
}
.upload_warp_text {
text-align: left;
margin-bottom: 10px;
padding-top: 10px;
text-indent: 14px;
border-top: 1px solid #ccc;
font-size: 14px;
}
.upload_warp_right {
float: left;
width: 57%;
margin-left: 2%;
height: 100%;
border: 1px dashed #999;
border-radius: 4px;
line-height: 130px;
color: #999;
}
.upload_warp_left img {
margin-top: 32px;
}
.upload_warp_left {
float: left;
width: 40%;
height: 100%;
border: 1px dashed #999;
border-radius: 4px;
cursor: pointer;
}
.upload_warp {
margin: 14px;
height: 130px;
}
.upload {
border: 1px solid #ccc;
background-color: #fff;
width: 650px;
box-shadow: 0px 1px 0px #ccc;
border-radius: 4px;
}
.hello {
width: 650px;
margin-left: 34%;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<div class="hello">
<div class="upload">
<div class="upload_warp">
<div class="upload_warp_left" @click="fileClick">
<img src="./upload.png">
</div>
<div class="upload_warp_right" @drop="drop($event)" @dragenter="dragenter($event)" @dragover="dragover($event)">
或者将文件拖到此处
</div>
</div>
<div class="upload_warp_text">
选中{{imgList.length}}张文件，共{{bytesToSize(this.size)}}
</div>
<input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>
<div class="upload_warp_img" v-show="imgList.length!=0">
<div class="upload_warp_img_div" v-for="(item,index) of imgList">
<div class="upload_warp_img_div_top">
<div class="upload_warp_img_div_text">
{{item.file.name}}
</div>
<img src="./del.png" class="upload_warp_img_div_del" @click="fileDel(index)">
</div>
<img :src="item.file.src">
</div>
</div>
</div>
</div>
</div>
<script>
// import up from './src/components/Hello'
var app = new Vue({
el: '#app',
data () {
return {
imgList: [],
size: 0
}
},
methods: {
fileClick() {
document.getElementById('upload_file').click()
},
fileChange(el) {
if (!el.target.files[0].size) return;
this.fileList(el.target);
el.target.value = ''
},
fileList(fileList) {
let files = fileList.files;
for (let i = 0; i < files.length; i++) {
//判断是否为文件夹
if (files[i].type != '') {
this.fileAdd(files[i]);
} else {
//文件夹处理
this.folders(fileList.items[i]);
}
}
},
//文件夹处理
folders(files) {
let _this = this;
//判断是否为原生file
if (files.kind) {
files = files.webkitGetAsEntry();
}
files.createReader().readEntries(function (file) {
for (let i = 0; i < file.length; i++) {
if (file[i].isFile) {
_this.foldersAdd(file[i]);
} else {
_this.folders(file[i]);
}
}
})
},
foldersAdd(entry) {
let _this = this;
entry.file(function (file) {
_this.fileAdd(file)
})
},
fileAdd(file) {
//总大小
this.size = this.size + file.size;
//判断是否为图片文件
if (file.type.indexOf('image') == -1) {
file.src = 'wenjian.png';
this.imgList.push({
file
});
} else {
let reader = new FileReader();
reader.vue = this;
reader.readAsDataURL(file);
reader.onload = function () {
file.src = this.result;
this.vue.imgList.push({
file
});
}
}
},
fileDel(index) {
this.size = this.size - this.imgList[index].file.size;//总大小
this.imgList.splice(index, 1);
},
bytesToSize(bytes) {
if (bytes === 0) return '0 B';
let k = 1000, // or 1024
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
}/* ,
dragenter(el) {
el.stopPropagation();
el.preventDefault();
},
dragover(el) {
el.stopPropagation();
el.preventDefault();
},
drop(el) {
el.stopPropagation();
el.preventDefault();
this.fileList(el.dataTransfer);
} */
}
})
</script>
</body>
</html>

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

  1. H5 利用vue实现图片上传功能。

    H5的上传图片如何实现呢? 以下是我用vue实现的图片上传功能,仅供参考. <!DOCTYPE html> <html> <head> <meta chars ...

  2. vue 剪切图片上传头像，使用 cropperjs 实现

    我使用的是vue,移动端的项目. 官网地址:cropperjs GitHub地址:https://github.com/fengyuanchen/cropperjs/blob/master/READM ...

  3. vue+elementUI 图片上传问题

    图片上传问题,获取后台的图片,并点击可以更换图片,并把图片存储到数据库中: (1)在编辑页面上,action指的图片上传的地址,header指请求头: (2)因为element-ui有自己上传的接口, ...

  4. spring boot + vue实现图片上传及展示

    转载:https://blog.csdn.net/weixin_40337982/article/details/84031778 其中一部分对我很有帮助 转载记录下 首先,html页面: <! ...

  5. vue 实现图片上传与预览，以及清除图片

    vue写原生的上传图片并预览以及清除图片的效果,下面是demo,其中里面有vue获取input框value值的方法以及vue中函数之间的调用 <!DOCTYPE html> <htm ...

  6. vue图片上传组件

    前言:很多项目中都需要用到图片上传功能,而其多处使用的要求,为了避免重复造轮子,让我决定花费一些时间去深入了解,最终封装了一个vue的图片上传组件.现将总结再次,希望有帮助. Layout <d ...

  7. 后台管理系统之“图片上传” --vue

    图片上传(基于vue) 相信上传图片是所有系统必备的功能吧,工作中的第一个管理系统就在上传图片的功能上卡顿了一整天. 当时用的elementUI组件,但是由于样式和设计图样式差别较大再加上原生相较好理 ...

  8. vue+axios实现移动端图片上传

    在利用vue做一些H5页面时,或多或少会遇到有图片上传的操作,主要是运用html5里面的input[type=file]来实现,传递到后端的数据是以二进制的格式传递,所以上传图片的请求与普通的请求稍微 ...

  9. 用Vue来实现图片上传多种方式

    没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element ...

随机推荐

  1. C++中结构体与类的区别（struct与class的区别）

    转载来源:http://blog.sina.com.cn/s/blog_48f587a80100k630.html C++中的struct对C中的struct进行了扩充,它已经不再只是一个包含不同数据 ...

  2. Phpstrom操作Git从服务器端克隆代码到本地

    1.第一步点开Git 2.添加项目的路径 第一个框是你所在的项目路径,后缀名是.git,这里我用的是HTTPS的方式(还有一种是SSH) 第二是你要克隆到所在目录,我的是在Apache下面的htdoc ...

  3. Linux文本的处理

    Linux最最最最重要的哲学思想就是:一切皆文件.文件以及文件的操作在LInux操作系统中是非常的重要.熟练使用精悍小巧快捷的文本处理方式让效率更高. 一.文件查看命令 less 分页查看 [root ...

  4. hadoop/storm以及hive/hbase/pig区别整理

    STORM与HADOOP的比较 对于一堆时刻在增长的数据,如果要统计,可以采取什么方法呢? 等数据增长到一定程度的时候,跑一个统计程序进行统计.适用于实时性要求不高的场景.如将数据导到HDFS,再运行 ...

  5. js随机出现2个数字

    1和2 随机出现 <script type="text/javascript"> $(function(){ if (Math.random()>0.5) { c ...

  6. 对HI3531的GPIO使用的再分析

    在一个嵌入式系统中使用最多的莫过于 通用输入输出 GPIO口.看到论坛中经常有朋友问海思为什么没有提供GPIO驱动.其实不然. 在海思SDK  xxx/osdrv/tools/board_tools/ ...

  7. Caffe、TensorFlow、MXnet三个开源库对比

    库名称 开发语言 支持接口 安装难度(ubuntu) 文档风格 示例 支持模型 上手难易 Caffe c++/cuda c++/python/matlab *** * *** CNN ** MXNet ...

  8. 微信公众号开发系列-Http请求封装基类

    HttpHelper请求封装基类,支持get请求和POS请求,方便微信开发接口交互,为后面接口交互做准备. 1.HttpHelper帮助基类 [csharp] view plaincopy using ...

  9. web开发性能优化---数据库篇

    1. 查询出的数据量过大(可以采用多次查询,其他的方法降低数据量),尽量采取分页查询数据 2.锁或者死锁(这也是查询慢最常见的问题,是程序设计的缺陷) 3.返回了不必要的行和列 用OR的字句可以分解成 ...

  10. 通过ajax记录网站UV、PV数

    1.通过jquery记录网站UV.PV数据 util.track = { log: function () { var referrer = util.browser.getReferrer(), h ...