蝙蝠岛资源网 Design By www.hbtsch.com
本文主要介绍VUE2.0图片上传功能的实现。原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件。
效果图如下:
1.DOM代码
1.1input标签
由于我们是通过input标签的方式进行图片上传的,但是input标签的样式有点丑,所以我们隐藏该样式display: none
<input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>
1.2添加图片按钮
如果需要用到此方法,只需要在你的上传按钮的地方调用@click=”chooseType”即可,其他部分代码为样式布局仅供参考。
<div class="add" @click="chooseType"> <div class="add-image" align="center"> <i class="icon-camera"></i> //按钮中的图片是一个icon字体图标 <p class="font13">添加图片</p> </div> </div>
1.3图片预览区域
如果需要用到此方法,只需要在你的预览区域进行v-for循环输出上传的图片集合即可。
<div class="add-img" v-show="imgList.length"> <p class="font14">图片(最多6张,还可上传<span v-text="6-imgList.length"></span>张)</p> <ul class="img-list"> <li v-for="(url,index) in imgList"> <img class="del" src="/UploadFiles/2021-04-02/btn_clean.png">1.4图片预览区域-拓展(1.3为简单运用,如果有时间后续会将完整的案例上传)
如果需要用到此方法,只需要在你的预览区域进行v-for循环输出上传的图片集合即可。本案例还运用的Y-DUI的lightbox组件,如有需要请参照图片预览的调用方式。此处,也调用了vue的懒加载和css背景图自适应的方法。
<div class="add-img" v-show="imgList.length"> <p class="font14">图片(最多6张,还可上传<span v-text="6-imgList.length"></span>张)</p> <ul class="img-list"> <li v-for="(url,index) in imgList"> <img class="del" src="/UploadFiles/2021-04-02/btn_clean.png">2.JS代码块
tips:此处的提示弹窗调用的Y-DUI的提示框,可以改成自己的提示框。
<script> export default { name: "Feedback", data() { return { showFace: false, imgList: [], size: 0, limit:6, //限制图片上传的数量 tempImgs:[] } }, methods: { chooseType() { 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) { if (this.limit !== undefined) this.limit--; if (this.limit !== undefined && this.limit < 0) return; //总大小 this.size = this.size + file.size; //判断是否为图片文件 if (file.type.indexOf('image') == -1) { this.$dialog.toast({mes: '请选择图片文件'}); } else { let reader = new FileReader(); let image = new Image(); let _this = this; reader.readAsDataURL(file); reader.onload = function () { file.src = this.result; image.onload = function(){ let width = image.width; let height = image.height; file.width = width; file.height = height; _this.imgList.push({ file }); console.log( _this.imgList); }; image.src= file.src; } } }, delImg(index) { this.size = this.size - this.imgList[index].file.size;//总大小 this.imgList.splice(index, 1); if (this.limit !== undefined) this.limit = 6-this.imgList.length; }, displayImg() { } } } </script>3.CSS样式代码块,仅供参考
太太懒了,没有一一区分
.app-bg >img{ width: 100%; height: 100%; -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -ms-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03); } textarea { padding: 10px; } .text-length { font-size: 14px; z-index: 999; width: 100%; text-align: right; margin-bottom: 10px; color: #e4e4e4; } .warning { color: #fe9900; } .add-img { width: 100%; padding: 10px; } .add-img p { color: #999; } .mui-content { padding-bottom: 60px; } .mui-content .idea { margin-top: 8px; background-color: #FFFFFF; } .good-item { text-align: center; width: 33%; max-width: 100%; overflow: hidden; padding-right: 10px; padding-bottom: 10px; float: left; } .good-item span { font-size: 15px; height: 30px; line-height: 30px; border-radius: 50px; display: block; width: 100%; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid #CCCCCC; } .mui-table { padding-top: 10px; color: #333; padding-left: calc(0.5% + 10px); } .h-line-behind { line-height: 40px; padding-left: 10px; } .question { border: 0; margin-bottom: 10px; } .add { display: inline-block; margin-bottom: 20px; } .add-image { padding-top: 15px; margin-left: 10px; width: 80px; top: 20px; height: 80px; border: 1px dashed rgba(0, 0, 0, .2); } .add-image .icon-camera { font-size: 24px; } .good-item .choose { color: #fff; background-color: #87582E; color: #FFF; border: 0; } .mui-btn-block { border: 0; border-radius: 0; background-color: #87582E; color: #fff; margin-bottom: 0; bottom: 0; } .mui-buttom { position: fixed; width: 100%; bottom: 0; z-index: 999; } /*九宫格*/ .img-list { overflow: hidden; } .img-list > li { float: left; width: 32%; text-align: center; padding-top: 31%; margin-left: 1%; margin-top: 1%; position: relative; } .img-list > li > div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .img-list > li > div .app-bg { width: 100%; height: 100%; } .mui-fullscreen { z-index: 9999; } .del { position: absolute; width: 18px; top: 0; right: 0; z-index: 999 }总结
以上所述是小编给大家介绍的Vue2.0 移动端图片上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无Vue2.0 实现移动端图片上传功能的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]