vue 使用<input type="file">上传图片、预览、删除
最近碰到了使用上传文件,发现vue-upload不怎么好用,网上找了好用的例子,记录一下
转自https://www.cnblogs.com/conglvse/p/9524452.html
vue 上传图片、预览、删除
使用原生<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部分
<style scoped>
.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;
}
</style>