转载

 代码如下：

<!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语言老司机学Python （一）

    Python 版本:3.6.4 参考网上教程:http://www.runoob.com/python3/python3-basic-syntax.html 开始了啊. 干咱们这行的老规矩,学新语言的 ...

  2. ActiveMq笔记2-消息持久化

    为了避免意外宕机以后丢失信息,需要做到重启后可以恢复消息队列,消息系统一般都会采用持久化机制. ActiveMQ的消息持久化机制有JDBC,AMQ,KahaDB和LevelDB, 无论使用哪种持久化方 ...

  3. visual studio调试功能简述

    vs调试简述 1.调试功能简述 vs提供了很强大的调试功能,能够让我们一步步执行中找到每个变量的值,便于查错改错.很多IDE都有调试功能,在使用调试功能时,记得先创建一个项目,哪怕是一个文件,也创建一 ...

  4. Token认证来龙去脉

    在Web领域基于Token的身份验证随处可见.在大多数使用Web API的互联网公司中,tokens 是多用户下处理认证的最佳方式. 为什么要用 Token Token 完全由应用管理,所以它可以避开 ...

  5. JavaScript常用对象有哪些

    JavaScript常用对象有哪些 1.String 2.Date 3.Math 4.Array 5.Number 6.Boolean

  6. vxWorks应用程序加载的另一种办法

    现在我们的工作中,应用程序一般都是和BSP联编,然后将vxworks_rom.bin烧到班子里.在BSP启动后,调用应用程序的函数的. 但是这样有个问题,就是应用程序和BSP结合的太紧密了.BSP开发 ...

  7. pat1121-1131

    1121 #include<cmath> #include<map> #include<iostream> #include<cstring> #inc ...

  8. TreeNode.trage的使用

    对于trage的使用 msdn是这样解释的 TreeNode.Target 属性 .NET Framework 2.0 其他版本 注意:此属性在 .NET Framework 2.0 版中是新增的. ...

  9. 阿里云ECS+CentOS 7.0+Docker+Redmine环境搭建

    前言 搭建Redmine环境可以选择使用分别安装Ruby+Rails+Redmine+MySQL的方式, 但是过程中需要解决各种扰人的依赖问题.Docker为我们提供的Plan B,方便,快捷. 安装 ...

  10. 【SPOJ】Longest Common Substring（后缀自动机）

    [SPOJ]Longest Common Substring(后缀自动机) 题面 Vjudge 题意:求两个串的最长公共子串 题解 \(SA\)的做法很简单 不再赘述 对于一个串构建\(SAM\) 另 ...