转载

 代码如下：

<!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. HashPayloadPcapReader

    package net.ripe.hadoop.pcap; import java.io.DataInputStream; import java.io.IOException; import com ...

  2. datanode启动不起来的各种原因

    一般在数据节点的log日志信息里能找到导致启动不起来的原因. 1.Namenode和Datanode的NamenodeID不一致 描述:一般在集群多次重新格式化HDFS之后,或者刚安装时会碰到.日志信 ...

  3. pc浏览器css和js计算浏览器宽度的差异以及和滚动条的关系

    如图: css宽度:1250 不包括滚动条宽度 用控制台箭头选取元素显示的左边的宽度:1250  不包含滚动条宽度 缩放浏览器右上角显示的宽度:1267 包含了滚动条宽度 再看下控制台: 由此可计算浏 ...

  4. 项目总结2——mybatis配置的理解

    之前的项目基本上都是用mongodb,以至于mysql相关的知识异常薄弱,这次连续一个半月的加班,总算是实际用到了mysql,也使自己对mysql了解的更多,对mybatis了解的更多,这里就说一说经 ...

  5. VC下ffmpeg例程调试报错处理

    tools/options/directories/include files  添加ffmpeg头文件所在路径 tools/options/directories/library files  添加 ...

  6. R语言︱SNA-社会关系网络—igraph包（中心度、中心势）（二）

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- SNA社会关系网络分析中,关键的就是通过一些指 ...

  7. 如何获取Linux-gate.so.1动态库

    前面"Linux应用程序Helloworld入门"已经提到在Linux下每个可执行文件都依赖于几个最为基本的动态库,其中一个就是linux-gate.so.1. 从上面ldd给出的 ...

  8. 安装sphinx和coreseek

    sphinx简介 Sphinx是由俄罗斯人Andrew Aksyonoff开发的一个全文检索引擎.意图为其他应用提供高速.低空间占用.高结果 相关度的全文搜索功能.Sphinx可以非常容易的与SQL数 ...

  9. 关于FusionCharts图表宽度width的设置问题导致图表显示异常的解决办法

    关于FusionCharts图表宽度width的设置问题导致图表显示异常的解决办法 题设: 经常使用FusionCharts图表的朋友可能会遇到这个问题.就是在FusionCharts显示的时候有时候 ...

  10. 解决MyEclipse中的Building workspace问题

    解决MyEclipse中的Building workspace问题 1.方法一 点击"Project",取消勾选"Build Automatically" 2. ...