小程序单张图片上传至服务器

最新推荐文章于 2024-04-18 17:49:37 发布

原创最新推荐文章于 2024-04-18 17:49:37 发布 · 947 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #单张图片 #图片上传 #服务器

小程序专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一种在微信小程序中实现图片选择与上传的方法。利用wx.chooseImage获取图片临时路径后，通过wx.uploadFile将图片上传到服务器，并展示了具体代码实现。

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

<!-- 上传的图 -->
<view class='itemImg' bindtap="chooseImage">
    <image src="{{img}}" data-src="{{item}}"  mode="aspectFill" />
    <!-- 删除按钮 -->
    <view class="delete" bindtap="deleteImg" data-index="{{index}}">X</view>
</view>

//通过微信API中的wx.chooseImage（获取图片）和wx.uploadFile（上传图片）
  chooseImage: function () {
    var that = this
    // 上传图片 获取路径
    wx.chooseImage({
      success: function (res) {
        console.log('临时路径：' + res.tempFilePaths[0])   
        wx.uploadFile({
          url: '开发者服务器 url',
          filePath: res.tempFilePaths[0],
          name: 'file',
          header: { "Content-Type": "multipart/form-data" },
          formData: {
            'program': 'logs'
          },
          success: function (result) {
            wx.showLoading({
              title: '上传中...',
            })
            //上传成功后的路径：
            var img = "服务器域名" + JSON.parse(result.data).path
            that.setData({
              img: img
            })
            wx.hideLoading()
            //缓存图片
            wx.setStorageSync('img', img)
          }
        })
      }
    })
  },

上传图片主要调用两个API，wx.chooseImage（获取图片）和wx.uploadFile（上传图片）