• 当前标签:预览图片

程序开发 小程序选择、预览、删除、上传图片

上次写了篇上传图片的文章:小程序上传图片及预览图片 ,还缺少一点功能,今天做了另一种删除删除样式,加上上传图片到服务器功能; wxml <!-- 图片上传模块 --> <view class='upImage' wx:if="{{isImage}}">   <view class='upImage-list'>     <view class='image-li' bindtap='chooseImage'>       <view class='iconfont icon-xiangji'></view>     </view>     <view class='image-li' wx:for="{{imgs}}" wx:key="imgs">       <image bindtap='previewImage' data-index='{{index}}' mode='aspectFill' src='{{item}}'></image>       <text bindtap='delImage' data-index='{{index}}'>删除</text>     </view>   </view>   <button bindtap='uploadImage'>上传图片</button> </view> wxss /* 上传图片 */ .upImage {   padding: 10px;   margin-top: 10px; } .upImage-list {   display: flex;   flex-wrap: wrap; } .image-li {   margin-right: 10px;   margin-bottom: 10px;   width: calc((100vw - 50px) / 4);   height: calc((100vw - 50px) / 4);   border: 1px solid #fff;   border-radius: 10px;   overflow: hidden;   position: relative; } .image-li:first-child {   display: flex;   align-items: center;   justify-content: center;   color: #eee; } .image-li:first-child view {   font-size: 100rpx; } .image-li:nth-child(4n) {   margin-right: 0; } .image-li image {   width: 100%;   height: 100%; } .image-li text {   position: absolute;   text-align: center;   bottombottom: 0;   left: 0;   width: 100%;   font-size: 24rpx;   background: rgba(0, 0, 0, 0.5);   color: #fff; } .upImage button{   background: rgba(0, 0, 0, 0);   color: #fff;   border: 1px solid #fff; } JS data:{     imgs: [] , // 图片临时储存 }, /**    * 选择图片点击    */   chooseImage:function(){     let that = this;     wx.chooseImage({       // count: 1, // 默认9       sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有       success: function (res) {         // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片         var tempFilePaths = res.tempFilePaths         let imgs = that.data.imgs;         for(let i =0; i < tempFilePaths.length; i++){           imgs.push(tempFilePaths[i])         }         that.setData({           imgs: imgs         })       }     })   },   /**    * 预览图片    */   previewImage:function(e){     let _index = e.currentTarget.dataset.index;     let list = this.data.imgs;     let current = list[_index];     wx.previewImage({       current: current, // 当前显示图片的http链接       urls: list // 需要预览的图片http链接列表     })   },   /**    * 删除图片    */   delImage:function(e){     let _index = e.currentTarget.dataset.index;     let previewImage = this.data.imgs;     console.log(previewImage)     previewImage.splice(_index, 1);     this.setData({       imgs: previewImage     })   },   /**    * 上传图片    */   uploadImage:function(e){     let imgs = this.data.imgs;     for (let i = 0; i < imgs.length; i++){     wx.uploadFile({       url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址       filePath: imgs[i],       name: 'file',       formData: {         'user': 'test'       },       success: function (res) {         var data = res.data         //do something       }     })     }   },

2018-03-16 11:10:06 209 6 0
阅读详情

程序开发 小程序上传图片及预览图片

wxml代码: <!-- 图片 -->     <view class='upImgTips' wx:if="{{previewImage != ''}}">点击预览图片,长按删除图片</view>     <view class='img'>       <view class='img_li' bindtap='upload_img'>         <text class='iconfont icon-zhaoxiangji'></text>       </view>       <view class='img_li' wx:for="{{previewImage}}" wx:key="{{index}}">         <image bindtap='previewImage' bindlongpress='delImage' data-index="{{index}}" data-src='{{item}}' src='{{item}}' mode='widthFix'></image>       </view>     </view>   wxss代码: .img {   width: 100%;   display: flex;   flex-wrap: wrap; } .img_li {   width: calc((100vw - 50px) / 4);   height: calc((100vw - 50px) / 4);   border: 1px dashed #4da585;   margin-right: 10px;   margin-bottom: 10px;   text-align: center;   line-height: calc((100vw - 50px) / 4);   border-radius: 5px;   overflow: hidden; } .img_li:nth-child(4n) {   margin-right: 0; } .img_li image {   width: 100%; } .recorder {   margin: 10px 0; } .upImgTips {   font-size: 25rpx;   margin-bottom: 10px; }   js代码: data: {    previewImage:[], // 预览图片地址  },  // 上传图片  upload_img:function(){    let that = this;    wx.chooseImage({      // count: 1, //最多可以选择的图片张数,默认9      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有      success: function (res) {        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片        var tempFilePaths = res.tempFilePaths        let previewImage = that.data.previewImage;        // console.log(res)        for (let i = 0; i < res.tempFilePaths.length;i++){            previewImage.push(tempFilePaths[i]);        }        // console.log(previewImage)        that.setData({          previewImage: previewImage        })      }    })  },  // 预览图片  previewImage:function(e){    wx.previewImage({      current: '', // 当前显示图片的http链接      urls: [e.currentTarget.dataset.src] // 需要预览的图片http链接列表    })  },  // 长按删除图片  delImage:function(e){    // console.log(e.currentTarget.dataset.index)    let _index = e.currentTarget.dataset.index;    let previewImage = this.data.previewImage;    console.log(previewImage)    previewImage.splice(_index,1);    this.setData({      previewImage: previewImage    })  },

2018-02-13 22:05:16 65 0 0
阅读详情
  • 1
前往