微信小程序上传图片_微信小程序js调用本地图片-优快云博客

本文链接：https://blog.youkuaiyun.com/Sun_Maple_jw/article/details/121637468

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>