小程序多图上传

<view class="wsxder" style="margin: 0 auto; width: 100%; margin-top: 40rpx;">
 
<view style="position: relative;" wx:for="{{source}}">
  <image class="fille" bindtap="upmg"  data-ling="{{index}}" src="/image/filled@2x.png"></image>
  <image class="imagess"  data-id="{{item}}" src='{{item}}' />
</view>
  <view wx:if="{{source.length<3}}" class="imagess" style="width: 200rpx; " bindtap="uploadimg">
    <image class="tiajial" src="/image/tiajial.png"></image>
  </view>


</view>


<!-- <view class="queren" bindtap="confirm">确认提交</view> -->





.imagess{
  display: block;
  width: 200rpx;
  height: 200rpx;
  position: relative;
  background-color: #f5f5f5;
  margin:  20rpx;
}
.tiajial{  
  position: absolute;
  width: 100rpx;
  height: 100rpx;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.wsxder{
  display: flex;
  justify-content: flex-start;align-items: center;
}
.fille{
  position: absolute;
  right: 0;
  top: 0;
  width: 50rpx;
  height: 50rpx;
  z-index: 999;
}
.queren{
  position: fixed;
  left: 50%;
  bottom: 50rpx;
  transform: translateX(-50%);
  width: 90%;
height: 90rpx;
line-height: 90rpx;
text-align: center;
color: #FFF;
background: linear-gradient(270deg, #4FBDF1 0%, #2F80ED 100%);
border-radius: 50px;
}
    function WorkPhotosList(){
		$files = request()->file('file');
		$directory = 'housek';//自定义目录名称
		$ContentType = 'image/jpg';//上传类型
		if ($files){
		   $filepath = $this->uploadOss($files,$directory,$ContentType);
	   }
	   page_result(0,"ok",$filepath);
	}
// pages/upload/upload.js
var app=getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imtg:[],
    source: [],
  },
  upmg(e) {
    var source = this.data.imtg
    var rty = e.currentTarget.dataset.ling

    source.splice(rty, 1)
    this.setData({
      source: source
    })
    console.log(this.data.source);
    /// 这里是获取到的图片最终地址
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */

  uploadimg: function () {
    var that = this;
    wx.chooseImage({ //从本地相册选择图片或使用相机拍照
      count: 3, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {

        //前台显示
   
        that.data.source.push(res.tempFilePaths[0])
      
        that.setData({
          source: that.data.source
          // sourcel:true
        })
that.ltttijiao(res.tempFilePaths[0])
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片


      }
    })
  },
  ltttijiao(rty){
    // wx.showToast({
    //   title: '上传中...',
    //   icon: 'success',
    //   duration: 8000
    //  }) 
    var that=this
    var tempFilePaths = rty
   
    wx.uploadFile({
     url: "xxxxxxx/mainapp.php/Housek/WorkPhotosList",
     filePath: tempFilePaths,
     name: 'file',
     formData: {
       file:tempFilePaths,
     },
     success:function(res){
       var aeer =JSON.parse(res.data)
    
      that.data.imtg.push(aeer.data)
      //  that.setData({
      //   imtg:    
      //  })
       console.log("最后的",  that.data.imtg);
     },
     fail:function (res) {
      wx.showToast({
        title: '上传格式错误',
        icon: 'success',
        duration: 2000
       })  
     }
   })
  },
})
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值