怎样制作小程序_Vue2.0 完成移动端图片上传功用

Vue2.0 实现移动端图片上传功能       本文主要介绍VUE2.0图片上传功能的实现。原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件。具体实例大家大家参考下本文

本文主要介绍VUE2.0图片上传功能的实现。原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件。

效果图如下:

1.DOM代码

1.1input标签

 由于我们是通过input标签的方式进行图片上传的,但是input标签的样式有点丑,所以我们隐藏该样式display: none

 input @change="fileChange($event)" type="file" id="upload_file" multiple / 

1.2添加图片按钮

 如果需要用到此方法,=”chooseType”即可,其他部分代码为样式布局仅供参考。

 div @click="chooseType" 
 div align="center" 
 i /i //按钮中的图片是一个icon字体图标
 p 添加图片 /p 
 /div 
 /div 

1.3图片预览区域

 如果需要用到此方法,只需要在你的预览区域进行v-for循环输出上传的图片集合即可。

 div v-show="imgList.length" 
 p 图片(最多6张,还可上传 span v-text="6-imgList.length" /span 张) /p 
 li v-for="(url,index) in imgList" 
 img src="../../assets/img/home/btn_clean.png" @click.stop="delImg(index)"/ 
 //del删除样式,icon字体图标需要自己找哦
 img :src="url.file.src" 
 /li 
 /ul 
 /div 

1.4图片预览区域-拓展(1.3为简单运用,如果有时间后续会将完整的案例上传)

 如果需要用到此方法,只需要在你的预览区域进行v-for循环输出上传的图片集合即可。本案例还运用的Y-DUI的lightbox组件,如有需要请参照图片预览的调用方式。此处,也调用了vue的懒加载和css背景图自适应的方法。

 div v-show="imgList.length" 
 p 图片(最多6张,还可上传 span v-text="6-imgList.length" /span 张) /p 
 li v-for="(url,index) in imgList" 
 img src="../../assets/img/home/btn_clean.png" @click.stop="delImg(index)"/ 
 yd-lightbox 
 div 
 yd-lightbox-img :original="url.file.src" v-lazy:background-image="{src: url.file.src, error: require('../../mon/img_placeholder400.png'), loading: require('../../mon/img_placeholder400.png')}" /yd-lightbox-img 
 /div 
 /yd-lightbox 
 /li 
 /ul 
 /div 

2.JS代码块

ti凡科抠图:此处的提示弹窗调用的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: elli凡科抠图is;
 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 移动端图片上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!