微信小程序上传图片

最新推荐文章于 2025-12-01 17:34:45 发布

原创最新推荐文章于 2025-12-01 17:34:45 发布 · 385 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #html5 #html #微信小程序

该博客详细介绍了如何在微信小程序中实现图片选择和上传到服务器的功能。通过`chooseImage`接口选择图片，然后使用`uploadFile`将本地临时文件路径上传到指定URL，最终获取并展示网络路径。示例代码中包括了点击事件处理、图片选择以及上传过程的逻辑。

wx.js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    imgs: [],//本地图片地址数组
    picPaths:[],//网络路径
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
  //添加上传图片
  chooseImageTap: function () {
    var that = this;
    wx.showActionSheet({
      itemList: ['从相册中选择', '拍照'],
      itemColor: "#00000",
      success: function (res) {
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            that.chooseWxImage('album')
          } else if (res.tapIndex == 1) {
            that.chooseWxImage('camera')
          }
        }
      }
    })
  },
  // 图片本地路径
  chooseWxImage: function (type) {
    var that = this;
    var imgsPaths = that.data.imgs;
    wx.chooseImage({
      sizeType: ['original', 'compressed'],
      sourceType: [type],
      success: function (res) {
        console.log(res.tempFilePaths[0]);
        that.setData({
          img:res.tempFilePaths[0]
        })
        // that.upImgs(res.tempFilePaths[0], 0) //调用上传方法
      }
    }) 
  },
  //上传服务器
/*   upImgs: function (imgurl, index) {
    var that = this;
    wx.uploadFile({
      url: 'https://xxxxxxxxxxxxxxxxxxxxxxxxxxxx',//
      filePath: imgurl,
      name: 'file',
      header: {
        'content-type': 'multipart/form-data'
      },
      formData: null,
      success: function (res) {
        console.log(res) //接口返回网络路径
        var data = JSON.parse(res.data)
          that.data.picPaths.push(data['msg'])
          that.setData({
            picPaths: that.data.picPaths
          })
          console.log(that.data.picPaths)
      }
    })
  }, */
 
})

wx.wxml

  <view class="upload_img" bindtap='chooseImageTap'>
    <view class="upload_img">
      <image src="http://mb.webhh.net/xiaochengxu/HRui/vip/positiveid.png" mode="aspectFit" />
      <text>
          点击上传照片
        </text>
    </view>
  </view>