微信小程序上传图片功能

小程序上传图片功能

展示效果图

wxml

  

    
     
        项目：
        
      
      
        *位置：
        
        {
    {nameErr}}
      
       
        *部门
        
          
             {
    {roomList[roomIndex].name||'选择部门'}}
          
        
        {
    {roomIdErr}}
      
      
        *事项名称：
        
          
             {
    {maintainItems[maintainItemIndex].name||'选择事项名称'}}
          
        
        {
    {maintainItemIdErr}}
      
     
      
        
        
          
            
            
          
          
            
          
        

      
    
    
      确定
    
  

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 () {

  }
})