vue 使用<input type="file">上傳圖片、預覽、刪除
阿新 • • 發佈:2021-01-20
最近碰到了使用上傳檔案,發現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>