微信小程序上传图片

完整代码见（为实现效果用了真实服务器，大家替换成自己的服务器等即可，请大家勿对服务器进行不法操作）https://download.csdn.net/download/gyx1549624673/10811676

具体思路，先将图片上传到服务器保存，然后将图片的连接传入服务器对应数据库表中。上代码

js代码

var app = getApp();
Page({
  
  data: {
    uploadedImages: [],
    imgBoolean: true,
    content: "不错",
    openid: '',
    circleid:' ',
    t:3,
    imgs: [],
    ss:[]

   
  },
  onLoad: function (options) {
  
    var that = this;
    wx.getStorage({
      key: 'userInfo',
      success: function (res) {
        console.log("cheng");
        that.setData({
          userInfo: res.data
        })
      },
    });
    wx.getStorage({
      key: 'openid',
      success: function (res) {
        console.log(res)
        console.log(res.data)
        that.setData({
          openid: res.data
        })

      },
    })

  },

  chooseImg() {

    let that = this;

    let len = this.data.imgs;

    if (len >= 3) {

      this.setData({

        lenMore: 1

      })





      return;

    }

    wx.chooseImage({

      success: (res) => {

        let tempFilePaths = res.tempFilePaths;

        console.log(tempFilePaths)

        let imgs = that.data.imgs;

        for (let i = 0; i < tempFilePaths.length; i++) {

          if (imgs.length <3 ) {

            imgs.push(tempFilePaths[i])

          } else {

            that.setData({

              imgs

            })

            wx.showModal({

              title: '提示',

              content: '最多只能有三张图片'

            })

            return;

          }

        }

        that.setData({

          imgs

        })

      }

    })

  },
  previewImg(e) {

    let index = e.currentTarget.dataset.index;

    let imgs = this.data.imgs;

    wx.previewImage({

      current: imgs[index],

      urls: imgs,

    })

  },

  deleteImg(e) {

    let _index = e.currentTarget.dataset.index;

    let imgs = this.data.imgs;

    imgs.splice(_index, 1);

    this.setData({

      imgs

    })

  },

  input: function (e) {
    var that=this;  
    that.setData({
      content:e.detail.value,  
    })
  },
  //发布按钮事件
  send: function () {
    var that = this;
    wx.showLoading({
      title: '上传中',

    })
    wx.request({
      url: '',
      method: 'POST',
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      data: {
        openid: that.data.openid,
        mess: that.data.content
      },
      success: function (res) {
        var id;
        that.setData({
          id: res.data

        })
        that.data.circleid = that.data.id;

        app.globalData.flag = res.data
        console.log("成功")
        console.log(that.data.circleid)
      
        for (var i = 0, h = that.data.imgs.length; i <= h; i++) {
  /*** */
wx.uploadFile({
url: '/', //开发者服务器的 url
filePath: that.data.imgs[0], // 要上传文件资源的路径 String类型！！！
name: 'file', // 文件对应的 key ,(后台接口规定的关于图片的请求参数)
header: {
'content-type': 'multipart/form-data'
},
// 设置请求的 header
formData: {
'key': "circle/" + that.data.circleid + "image_" +i+ ".png"
},
// HTTP 请求中其他额外的参数
success: function (res) {
wx.showToast({
title: '成功上传！',
})
console.log("shang")
  wx.request({
          url: '',
      method: 'POST',
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      data: {
        openid: that.data.openid,
        mess: that.data.content
      },
     success: function (res) {
          wx.switchTab({
                url: '../friend/friend',
              })    
     }
  })
},
fail: function (res) {
}
})
//**** */

      }
    })


    wx.switchTab({
      url: '../friend/friend',
    })

   
  },


})

wxml

<!--index/massege.wxml-->

<view class='page'>

  <textarea class='text' bindblur='input' placeholder="分享动态" auto-height/>



  <view class="img-box">



    <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">



        <image src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"></image>



        <view class="delete-btn" data-index="{{index}}" catchtap="deleteImg">删除</view>



    </view>



    <view class="upload-img-btn" bindtap="chooseImg" wx:if="{{imgs.length<3}}">+</view>



</view>







</view>







<button href="javasctipt:;"  bindtap="send"  class='sub'>发布</button>

css

.img-box{



    width: 100%;



    height: 100%;



    display: flex;



    flex-direction: row;



    flex-wrap: wrap;

    margin-top:60rpx;

    margin-bottom: 30rpx;



 



}



.img{



    width: 100px;



    height: 100px;



   



    position: relative;



}



.img image{



    width: 100%;



    height: 100%;



}



.delete-btn{



    position: absolute;



    bottom: 0;



    left: 0;



    width: 100%;



    height: 30px;



    font-size: 12px;



    color: #fff;



    background: rgba(0,0,0,.5);



    text-align: center;



    line-height: 30px;



}



.upload-img-btn{



    width: 100px;



    height: 100px;



    text-align: center;



    line-height: 100px;



    border: 1px solid #ccc;



}

 微信小程序多图上传