使用原生<input type="file">上传图片、预览、删除;multiple实现可上传多张

参数名 类型 说明
fileTypes Array 文件类型, 默认'jpeg','bmp','gif','jpg'
limit Number 限制数量,默认5
size Number 最大图片大小,默认5M
@imgs Object 上传的图片文件

html部分

<template>
<div class="form-group">
<label class="control-label">上传图片</label>
<div class="control-form">
<p class="help-block">(建议图片格式为:JPEG/BMP/PNG/GIF,大小不超过5M,最多可上传4张)</p>
<ul class="upload-imgs">
<li v-if="imgLen>=4 ? false : true">
<input type="file" class="upload" @change="addImg" ref="inputer" multiple accept="image/png,image/jpeg,image/gif,image/jpg"/>
<a class="add"><i class="iconfont icon-plus"></i><p>点击上传</p></a>
</li>
<li v-for='(value, key) in imgs'>
<p class="img"><img :src="getObjectURL(value)"><a class="close" @click="delImg(key)">×</a></p>
</li>
</ul>
</div>
</div>
</template>

js部分

<script>
export default {
data() {
return {
formData:new FormData(),
imgs: {},
imgLen:0,
}
},
methods: {
addImg(event){
let inputDOM = this.$refs.inputer;
// 通过DOM取文件数据
this.fil = inputDOM.files;
let oldLen=this.imgLen;
let len=this.fil.length+oldLen;
if(len>4){
alert('最多可上传4张,您还可以上传'+(4-oldLen)+'张');
return false;
}
for (let i=0; i < this.fil.length; i++) {
let size = Math.floor(this.fil[i].size / 1024);
if (size > 5*1024*1024) {
alert('请选择5M以内的图片!');
return false
}
this.imgLen++;
this.$set(this.imgs,this.fil[i].name+'?'+new Date().getTime()+i,this.fil[i]);
}
},
getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
},
delImg(key){
this.$delete(this.imgs,key);
this.imgLen--;
},
submit(){
for(let key in this.imgs){
let name=key.split('?')[0];
this.formData.append('multipartFiles',this.imgs[key],name);
}
this.$http.post('/opinion/feedback', this.formData,{
headers: {'Content-Type': 'multipart/form-data'}
}).then(res => {
this.alertShow=true;
});
},
}
}
</script>

css部分

.upload-imgs{margin: 10px 0 30px 0;overflow: hidden;font-size: 0;}
.upload-imgs li{position: relative;width: 118px;height: 118px;font-size: 14px;display: inline-block;padding: 10px;margin-right: 25px;border: 2px dashed #ccc;text-align: center;vertical-align: middle;}
.upload-imgs li:hover{border-color: $them-color;}
.upload-imgs .add{display: block;background-color: #ccc;color: #ffffff;height: 94px;padding: 8px 0;}
.upload-imgs .add .iconfont{padding: 10px 0;font-size: 40px;}
.upload-imgs li:hover .add{background-color: $them-color;}
.upload-imgs li .upload{position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 118px;height: 118px;}
.upload-imgs .img{position: relative;width: 94px;height: 94px;line-height: 94px;}
.upload-imgs .img img{vertical-align: middle;}
.upload-imgs .img .close{display: none;}
.upload-imgs li:hover .img .close{display: block;position: absolute;right: -6px;top: -10px;line-height: 1;font-size: 22px;color: #aaa;}

vue <input type="file">上传图片、预览、删除的更多相关文章

  1. 前端实现input[type='file']上传图片预览效果

    众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现 ...

  2. 一、H5(移动端)前端使用input type=file 上传图片,调用相机和相册

    一.H5(移动端)前端使用input type=file 上传图片,调用相机和相册

  3. input[type=file]上传图片及转为base64码以及预览

    <input type="file" id="imgurl" capture="camera" accept="image/ ...

  4. input file上传图片预览,非插件

    Input标签 <input type="file" name="pic" onchange="changepic(this)" mu ...

  5. input[type="file"]上传图片并显示图片

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 关于input type=file上传图片的总结

    最近比较忙,现在来整理一下近期的成果,方便以后再次使用. 关于图片上传的js 和jq jq $("input").change(function () { var $file = ...

  7. 解决JS(Vue)input[type='file'] change事件无法上传相同文件的问题

    Html <input id="file" type="file" accept=".map" onchange="uplo ...

  8. vue 结合 FileReader() 实现上传图片预览功能

    项目中 身份证上传需求: <div class="ID_pic_wrap"> <ul> <li> <img src="../.. ...

  9. input type = file 上传图片转为base64

    项目背景是做图片识别,接口需要上传图片格式为base64格式的,react项目的相关代码: let reader = new FileReader();reader.readAsDataURL(e.t ...

随机推荐

  1. web.config添加identity impersonate="true"导致拒绝访问

    例:<identity impersonate="tr" userName="AD\name" password="word"/> ...

  2. HDU-5307 He is Flying (FFT)

    Problem DescriptionJRY wants to drag racing along a long road. There are n sections on the road, the ...

  3. Vue2.0八——知识点整理

    1.active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答 ...

  4. Vijos——T1053 Easy sssp

    https://vijos.org/p/1053 描述 输入数据给出一个有N(2 <= N <= 1,000)个节点,M(M <= 100,000)条边的带权有向图. 要求你写一个程 ...

  5. cogs 32. [POI1999] 位图

    32. [POI1999] 位图 ★   输入文件:bit.in   输出文件:bit.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述 ] 给定一个 n*m 的矩形位图, ...

  6. 深入理解Core Data

    留给我这忘事精看 Core Data 是什么? 大概八年前,2005年的四月份,Apple 公布了 OS X 10.4,正是在这个版本号中 Core Data 框架公布了.那个时候 YouTube 也 ...

  7. 一种基于RGB空间的对照度增强的filter

    今天看前辈博客的时候看到一种新的基于RGB颜色空间的image contrast enhance filter 流浪的鱼link: http://blog.csdn.net/jia20003/arti ...

  8. android 二次按返回键退出client

    android中有的app退出client时弹出对话框的方法,有的是点击二次,第一次是提示用户是否退出client,第二次点击才是真正的退出app.这是用二次点击返回键的时间间隔推断, 今天就实现这简 ...

  9. Android实现本地图片选择及预览缩放效果仿春雨医生

    在做项目时常常会遇到选择本地图片的需求.曾经都是懒得写直接调用系统方法来选择图片.可是这样并不能实现多选效果.近期又遇到了,所以还是写一个demo好了.以后也方便使用.还是首先来看看效果 显示的图片使 ...

  10. 如何覆盖GCE的DHCP MTU选项

     如何覆盖GCE的DHCP MTU选项 在GCE上托管的Linux IPSec隧道不能打开谷歌,这与MTU有关.谷歌管理员认为"改变这个值是一件困难的事情"https://cl ...