绵阳梓潼网站制作公司

Vue2.0怎么实现移动端图片上传功能

这篇文章主要介绍Vue2.0怎么实现移动端图片上传功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联公司是一家从事企业网站建设、成都网站制作、网站建设、行业门户网站建设、网页设计制作的专业网站制作公司，拥有经验丰富的网站建设工程师和网页设计人员，具备各种规模与类型网站建设的实力，在网站建设领域树立了自己独特的设计风格。自公司成立以来曾独立设计制作的站点1000+。

效果图如下：

Vue2.0怎么实现移动端图片上传功能

1.DOM代码

1.1input标签

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

1.2添加图片按钮

 如果需要用到此方法，只需要在你的上传按钮的地方调用@click=”chooseType”即可，其他部分代码为样式布局仅供参考。

 
 
   //按钮中的图片是一个icon字体图标
  添加图片

 

1.3图片预览区域

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


 图片(最多6张，还可上传张)

 
  
    
   //del删除样式，icon字体图标需要自己找哦
   
  
 

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

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


 图片(最多6张，还可上传张)

 
  
   
   
    
     
    
        

2.JS代码块

tips：此处的提示弹窗调用的Y-DUI的提示框，可以改成自己的提示框。

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怎么实现移动端图片上传功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


当前文章：Vue2.0怎么实现移动端图片上传功能
分享链接：http://myzitong.com/article/jhcojc.html

其他资讯