| @ -1,143 +0,0 @@ | |||||
| // uploadImages/uploadImg.js
 |  | ||||
| const WXAPI = require('../../utils/config.js') |  | ||||
| Component({ |  | ||||
|   /** |  | ||||
|    * 组件的属性列表 |  | ||||
|    */ |  | ||||
|   properties: { |  | ||||
|     count: { //最多选择图片的张数,默认9张
 |  | ||||
|       type: Number, |  | ||||
|       value: 9 |  | ||||
|     }, |  | ||||
|     uploadUrl: { //图片上传的服务器路径
 |  | ||||
|       type: String, |  | ||||
|       value: '' |  | ||||
|     }, |  | ||||
|     showUrl: { //图片的拼接路径
 |  | ||||
|       type: String, |  | ||||
|       value: '' |  | ||||
|     }, |  | ||||
|     albumType: { //album 从相册选图,camera 使用相机,默认二者都有
 |  | ||||
|       type: String, |  | ||||
|       value: '' |  | ||||
|     }, |  | ||||
|     detailPics: { |  | ||||
|       type: Array, |  | ||||
|       value: [] |  | ||||
|     } |  | ||||
|   }, |  | ||||
| 
 |  | ||||
|   /** |  | ||||
|    * 组件的初始数据 |  | ||||
|    */ |  | ||||
|   data: { |  | ||||
|     detailPics: [], //上传的结果图片集合
 |  | ||||
|   }, |  | ||||
|   onShow() { |  | ||||
|     console.log(1) |  | ||||
|   }, |  | ||||
|   /** |  | ||||
|    * 组件的方法列表 |  | ||||
|    */ |  | ||||
|   methods: { |  | ||||
|     /** |  | ||||
|      * 上传详细图片 |  | ||||
|      */ |  | ||||
|     uploadDetailImage: function (e) { //这里是选取图片的方法
 |  | ||||
|       var that = this; |  | ||||
|       var pics = []; |  | ||||
|       var detailPics = that.data.detailPics; |  | ||||
|       if (detailPics.length >= that.data.count) { |  | ||||
|         wx.showToast({ |  | ||||
|           title: '最多选择' + that.data.count + '张!', |  | ||||
|         }) |  | ||||
|         return; |  | ||||
|       } |  | ||||
|       wx.chooseMedia({ |  | ||||
|         count: that.data.count, // 最多可以选择的图片张数,默认9
 |  | ||||
|         sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
 |  | ||||
|         sourceType: that.data.albumType == '0' ? ['camera'] : ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
 |  | ||||
|         success: function (res) { |  | ||||
|           var imgs = res.tempFiles; |  | ||||
|           var ticket = wx.getStorageSync('ticket'); |  | ||||
|           var urlArr = [] |  | ||||
|           for (var i = 0; i < imgs.length; i++) { |  | ||||
|             pics.push(imgs[i]) |  | ||||
|             var url = imgs[i].tempFilePath |  | ||||
|             //取得文件的后缀
 |  | ||||
|             var extensiton = url.substr(url.lastIndexOf('.') + 1).toLowerCase(); |  | ||||
|             //  根据时间戳生成唯一的主文件名称 
 |  | ||||
|             var mainname = '' + Date.now() + Math.ceil(Math.random() * 9999); |  | ||||
|             var uploadUrl = WXAPI.API_BASE_URL + 'Common/UploadUserFile?ticket=' + ticket + '&name=' + mainname + '.' + extensiton; |  | ||||
|             urlArr.push(uploadUrl) |  | ||||
|           } |  | ||||
|           that.uploadImg({ |  | ||||
|             url: urlArr, //这里是你图片上传的接口
 |  | ||||
|             path: pics, //这里是选取的图片的地址数组
 |  | ||||
|           }); |  | ||||
|         }, |  | ||||
|       }) |  | ||||
|     }, |  | ||||
|     //多张图片上传
 |  | ||||
|     uploadImg: function (data) { |  | ||||
|       // console.log(this.globalData.openId)
 |  | ||||
|       wx.showLoading({ |  | ||||
|         title: '上传中...', |  | ||||
|         mask: true, |  | ||||
|       }) |  | ||||
|       var that = this, |  | ||||
|         i = data.i ? data.i : 0, |  | ||||
|         success = data.success ? data.success : 0, |  | ||||
|         fail = data.fail ? data.fail : 0; |  | ||||
|       wx.uploadFile({ |  | ||||
|         url: data.url[i], |  | ||||
|         header: { 'content-type': 'multipart/form-data' }, |  | ||||
|         filePath: data.path[i].tempFilePath, |  | ||||
|         name: 'image', |  | ||||
|         formData: { "openid": '1' }, |  | ||||
|         success: (resp) => { |  | ||||
|           wx.hideLoading(); |  | ||||
|           success++; |  | ||||
|           var info = JSON.parse(resp.data);//返回的结果,可能不同项目结果不一样
 |  | ||||
|           // console.log(info)
 |  | ||||
|           var picName = that.data.showUrl + info.data.url; |  | ||||
|           var detailPics = that.data.detailPics; |  | ||||
|           detailPics.push(picName) |  | ||||
|           that.setData({ |  | ||||
|             detailPics: detailPics |  | ||||
|           }) |  | ||||
|         }, |  | ||||
|         fail: (res) => { |  | ||||
|           fail++; |  | ||||
|           console.log('fail:' + i + "fail:" + fail); |  | ||||
|         }, |  | ||||
|         complete: () => { |  | ||||
|           i++; |  | ||||
|           if (i == data.path.length) { //当图片传完时,停止调用     
 |  | ||||
|             console.log('执行完毕'); |  | ||||
|             // console.log('成功:' + success + " 失败:" + fail);
 |  | ||||
|             var eventDetail = { |  | ||||
|               picsList: that.data.detailPics |  | ||||
|             } // detail对象,提供给事件监听函数
 |  | ||||
|             var eventOption = {} // 触发事件的选项
 |  | ||||
|             that.triggerEvent('event', eventDetail, eventOption) |  | ||||
|           } else { //若图片还没有传完,则继续调用函数
 |  | ||||
|             data.i = i; |  | ||||
|             data.success = success; |  | ||||
|             data.fail = fail; |  | ||||
|             that.uploadImg(data); |  | ||||
|           } |  | ||||
|         } |  | ||||
|       }); |  | ||||
|     }, |  | ||||
|     //预览图片
 |  | ||||
|     imagePreview: function (e) { |  | ||||
|       console.log(e.target.dataset) |  | ||||
|       var current = e.target.dataset.src; |  | ||||
|       wx.previewImage({ |  | ||||
|         current: current, // 当前显示图片的http链接  
 |  | ||||
|         urls: this.data.detailPics // 需要预览的图片http链接列表  
 |  | ||||
|       }) |  | ||||
|     }, |  | ||||
|   } |  | ||||
| }) |  | ||||
| @ -1,4 +0,0 @@ | |||||
| { |  | ||||
|   "component": true, |  | ||||
|   "usingComponents": {} |  | ||||
| } |  | ||||
| @ -1,19 +0,0 @@ | |||||
| <!--uploadImages/uploadImg.wxml--> |  | ||||
| <view class='content'> |  | ||||
|   <!-- <view class='img-box'> --> |  | ||||
|   <scroll-view class='img-box' scroll-x="true"> |  | ||||
|     <view class='img-list'> |  | ||||
|       <block wx:for="{{detailPics}}" wx:key="index"> |  | ||||
|         <view class='img-item'> |  | ||||
|           <image src='{{item}}' mode="aspectFill" bindtap="imagePreview" bindlongpress="longpressImg"></image> |  | ||||
|         </view> |  | ||||
|       </block> |  | ||||
|       <view class='chooseImg' bindtap='uploadDetailImage'> |  | ||||
|         <!-- <view class="weui-uploader__input-box"></view> --> |  | ||||
|         <image class="weui-uploader__input-box" src="/images/upload.png"></image> |  | ||||
|       </view> |  | ||||
|     </view> |  | ||||
|     <!-- <view class='tips'>长按对应的图片即可删除</view> --> |  | ||||
|   </scroll-view> |  | ||||
|   <!-- </view> --> |  | ||||
| </view> |  | ||||
| @ -1,76 +0,0 @@ | |||||
| /* uploadImages/uploadImg.wxss */ |  | ||||
| page { |  | ||||
|   background-color: #f1f0f5; |  | ||||
| } |  | ||||
| 
 |  | ||||
| .content { |  | ||||
|   width: 100%; |  | ||||
|   background-color: #fff; |  | ||||
| } |  | ||||
| 
 |  | ||||
| .img-box { |  | ||||
|   width: 100%; |  | ||||
|   margin-left: 35rpx; |  | ||||
|   margin-right: 35rpx; |  | ||||
| } |  | ||||
| 
 |  | ||||
| .img-list { |  | ||||
|   display: flex; |  | ||||
|   display: -webkit-flex; |  | ||||
|   flex-direction: row; |  | ||||
|   justify-content: flex-start; |  | ||||
|   align-items: center; |  | ||||
|   /* flex-wrap: wrap; */ |  | ||||
| } |  | ||||
| 
 |  | ||||
| .img-item { |  | ||||
|   width: 150rpx; |  | ||||
|   text-align: left; |  | ||||
|   margin-right: 20rpx; |  | ||||
|   margin-bottom: 10rpx; |  | ||||
| } |  | ||||
| 
 |  | ||||
| .img-item image { |  | ||||
|   width: 150rpx; |  | ||||
|   height: 150rpx; |  | ||||
| } |  | ||||
| 
 |  | ||||
| .chooseImg { |  | ||||
|   background-color: #fff; |  | ||||
| } |  | ||||
| 
 |  | ||||
| .weui-uploader__input-box { |  | ||||
|   float: left; |  | ||||
|   position: relative; |  | ||||
|   margin-right: 9px; |  | ||||
|   margin-bottom: 9px; |  | ||||
|   width: 150rpx; |  | ||||
|   height: 150rpx; |  | ||||
|   /* border: 1px solid #d9d9d9; */ |  | ||||
| } |  | ||||
| 
 |  | ||||
| /* .weui-uploader__input-box:after, .weui-uploader__input-box:before { |  | ||||
|   content: " "; |  | ||||
|   position: absolute; |  | ||||
|   top: 50%; |  | ||||
|   left: 50%; |  | ||||
|   -webkit-transform: translate(-50%, -50%); |  | ||||
|   transform: translate(-50%, -50%); |  | ||||
|   background-color: #d9d9d9; |  | ||||
| } */ |  | ||||
| 
 |  | ||||
| .weui-uploader__input-box:before { |  | ||||
|   width: 2px; |  | ||||
|   height: 35px; |  | ||||
| } |  | ||||
| 
 |  | ||||
| .weui-uploader__input-box:after { |  | ||||
|   width: 35px; |  | ||||
|   height: 2px; |  | ||||
| } |  | ||||
| 
 |  | ||||
| .tips { |  | ||||
|   color: #666; |  | ||||
|   font-size: 25rpx; |  | ||||
|   padding-bottom: 20rpx; |  | ||||
| } |  | ||||
| Before Width: | Height: | Size: 1.6 KiB | 
| Before Width: | Height: | Size: 6.1 KiB | 
| After Width: | Height: | Size: 6.9 KiB | 
| Before Width: | Height: | Size: 157 KiB | 
| After Width: | Height: | Size: 7.4 KiB | 
| Before Width: | Height: | Size: 162 KiB | 
| After Width: | Height: | Size: 7.0 KiB | 
| Before Width: | Height: | Size: 151 KiB | 
| After Width: | Height: | Size: 7.4 KiB | 
| Before Width: | Height: | Size: 161 KiB | 
| After Width: | Height: | Size: 6.9 KiB | 
| Before Width: | Height: | Size: 165 KiB | 
| After Width: | Height: | Size: 7.5 KiB | 
| Before Width: | Height: | Size: 149 KiB | 
| After Width: | Height: | Size: 8.1 KiB | 
| Before Width: | Height: | Size: 161 KiB | 
| Before Width: | Height: | Size: 29 KiB |