微信小程序上传图片功能

小程序上传图片功能

展示效果图

wxml

<!--pages/maintenance_home_entry_patrol_start_cruise/maintenance_home_entry_patrol_start_cruise.wxml-->
<view class="container">
  <form class="fm" bindsubmit="formSubmit">
    <view class="boxfm">
     <view class="input-item">
        <label class="fm-tit"><text>项目：</text></label>
        <input class="weui-input" name="name"  value='{{projectName}}' />
      </view>
      <view class="input-item">
        <label class="fm-tit"><text class="text-red">*</text><text>位置：</text></label>
        <input class="weui-input" name="name" placeholder="输入位置" value='{{form.name}}' bindinput="getName" />
        <view class="error phone">{{nameErr}}</view>
      </view>
       <view class="input-item">
        <label class="fm-tit"><text class="text-red">*</text><text>部门</text></label>
        <picker bindchange="bindRoomChange" value="{{index}}" range-key="name" range="{{roomList}}">
          <view class="picker">
            <input class="weui-input" name="roomId" value='{{form.roomId}}' hidden/> {{roomList[roomIndex].name||'选择部门'}}
          </view>
        </picker>
        <view class="error">{{roomIdErr}}</view>
      </view>
      <view class="input-item">
        <label class="fm-tit"><text class="text-red">*</text><text>事项名称：</text></label>
        <picker bindchange="bindMaintainItemChange" value="{{index}}" range-key="name" range="{{maintainItems}}">
          <view class="picker">
            <input class="weui-input" name="maintainItemId" value='{{form.maintainItemId}}' hidden/> {{maintainItems[maintainItemIndex].name||'选择事项名称'}}
          </view>
        </picker>
        <view class="error phone">{{maintainItemIdErr}}</view>
      </view>
     
      <view class="input-item">
        <view class="img-tit"></view>
        <view class='uploader-img  flex justify-content-start'>
          <view class='flex-item uploader-list' wx:for="{{pics}}" wx:key="item.length">
            <image src='{{item}}' data-index="{{index}}" mode="scaleToFill" bindtap=' ' />
            <image class='delete' data-index="{{index}}" src='../../img/close.png' mode="widthFix" bindtap='deleteImg' />
          </view>
          <view class='flex-item upAdd' bindtap='chooseImg' wx:if="{{pics.length<9}}">
            <image src='../../img/file.jpg' mode="widthFix" />
          </view>
        </view>

      </view>
    </view>
    <view class="btnidenty">
      <button type="primary" form-type="submit">确定</button>
    </view>
  </form>
</view>

wxss

/* pages/maintenance_home_entry_patrol_start_cruise/maintenance_home_entry_patrol_start_cruise.wxss */

.fm {
  background: #fff;
  width: 100%;
  padding: 25rpx;
  font-size: 12px;
  box-sizing: border-box;
}

.fm-tit {
  position: absolute;
  left: 20rpx;
  top: 0;
  z-index: 2;
}
.text-red{
  color: red;
}
.fm input, .fm textarea {
  text-align: right;
  padding-left: 200rpx;
  box-sizing: border-box;
}
.hide{
  display: none;
}
.fm textarea {
  min-height:80rpx;
  padding-top:20rpx;
  width: 660rpx;
  border-bottom: 1px solid #f1f1f1;
}

.btnsend {
  position: absolute;
  bottom: 70rpx;
  right: 20rpx;
  z-index: 2;
  color: #333;
}

.input-item .picker {
  text-align: right;
}

.upAdd image {
  width: 200rpx;
  height: 200rpx;
}
.uploader-img{display:flex;flex-wrap: wrap;}
.flex-item {  
  position: relative;
  margin-right:30rpx;
  margin-bottom:30rpx;
}
.flex-item:nth-child(3n){
  margin-right:0;
}
.uploader-list image {
  width: 200rpx;
  height: 200rpx;
}

.uploader-list image.delete {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 20rpx;
  height: 20rpx;
}
.img-tit{margin-bottom:20rpx;}

js

// pages/maintenance_home_entry_patrol_start_cruise/maintenance_home_entry_patrol_start_cruise.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    projectName:"鑫火",
    pics:[],
    ids:[],
  },
/**
   * 图片上传
   * 
   */

  //上传图片开始
  chooseImg: function (e) {
    var that = this, pics = that.data.pics,ids=that.data.ids;
    if (pics.length < 9) {
      wx.chooseImage({
        count: 9 - pics.length, // 最多可以选择的图片张数，默认9
        sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
        sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
        success: function (res) {
          console.log("图片上传",res)
          wx.showLoading({
            title: '图片上传中',
          });
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          var tempFilePaths = res.tempFilePaths;
          tempFilePaths.forEach(item => {
            wx.uploadFile({
              url: app.baseData.URL + '/mvc/public/fileupload',
              filePath: item,
              name: 'uploadFiles',
              header: {
                "Content-Type": "multipart/form-data",
                'Access-Token': wx.getStorageSync("token")
              },
              formData: {
                method: 'POST'
              },
              success: function (res) {
                var data = JSON.parse(res.data);
                console.log(item);

                pics.push(item);
                for (var i = 0; i < data.attachs.length; i++) {
                  ids.push(data.attachs[i].id);
                }
                that.setData({
                  ids: ids,
                  pics: pics
                });
                console.log(ids, pics);
                wx.hideLoading();
              }
            })
          })
          
        },
      });
    } else {
      wx.showToast({
        title: '最多上传9张图片',
        icon: 'none',
        duration: 3000
      });

    }
  },
  // 删除图片
  deleteImg: function (e) {
    var that = this;
    var pics = this.data.pics, ids = this.data.ids;
    var index = e.currentTarget.dataset.index;
    pics.splice(index, 1);
    ids.splice(index, 1);
    wx.setStorageSync('ids', ids);
    this.setData({
      pics: pics,
      ids:ids
    })
  },
  // 预览图片
  previewImg1: function (e) {
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;
    //所有图片
    var pics = this.data.pics;
    wx.previewImage({
      //当前显示图片
      current: pics[index],
      //所有图片
      urls: pics
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})