微信小程序上传图片到php服务器的方法

下面是关于“微信小程序上传图片到php服务器的方法”的完整攻略。

准备工作

在开始上传图片之前，我们需要准备以下工作：

1. 创建一个php文件用于接收上传的图片，保存在服务器上。
2. 生成并保存服务器上传接口的url地址。
3. 将需要上传的图片转换为base64编码格式。
4. 在微信小程序的配置文件中添加request合法域名。

在准备工作完成后，我们就可以开始进行图片上传了。

上传图片到php服务器

以下是具体的上传图片到php服务器的步骤：

1. 使用微信小程序中的wx.chooseImage函数选择需要上传的图片，并在回调函数中获取选择的图片临时路径。

wx.chooseImage({
  success: function (res) {
    var tempFilePaths = res.tempFilePaths
    //上传操作
  }
})

1. 使用wx.getFileSystemManager函数将选择的图片转换成base64编码格式。

const fs = wx.getFileSystemManager()
fs.readFile({
  filePath: tempFilePaths[0],
  encoding: 'base64',
  success: function(res) {
    var base64Data = res.data
    //上传操作
  }
})

1. 使用wx.request函数将base64编码后的图片上传到服务器。

wx.request({
  url: '上传接口url地址',
  method: 'POST',
  header: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  data: {
    imagebase64str: base64Data
  },
  success: function(res) {
    console.log(res.data)
  },
  fail: function(res) {
    console.log('上传失败')
  }
})

1. 在服务器上接收上传的图片，并将其保存到服务器上的指定位置。以下是保存图片的php代码示例：

$image = $_POST['imagebase64str'];
$image = str_replace('data:image/png;base64,', '', $image);
$image = str_replace(' ', '+', $image);
$data = base64_decode($image);
$file = 'uploads/'.date('YmdHis').'.png';
$success = file_put_contents($file, $data);
if($success) {
  echo '上传成功';
}else {
  echo '上传失败';
}

示例说明

为了更好的理解图片上传的步骤，以下是两个图片上传的示例：

示例1

场景：在微信小程序中上传一张图片至php服务器上，并返回上传成功或失败的提示。

步骤：

1. 在微信小程序端使用wx.chooseImage函数选择一张图片。

wx.chooseImage({
  success: function (res) {
    var tempFilePaths = res.tempFilePaths
    uploadImage(tempFilePaths[0])
  }
})

1. 编写uploadImage函数，将选择的图片上传到服务器上。

function uploadImage(path) {
  const fs = wx.getFileSystemManager()
  fs.readFile({
    filePath: path,
    encoding: 'base64',
    success: function(res) {
      var base64Data = res.data
      wx.request({
        url: '上传接口url地址',
        method: 'POST',
        header: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        data: {
          imagebase64str: base64Data
        },
        success: function(res) {
          wx.showToast({
            title: res.data,
            icon: 'success'
          })
        },
        fail: function(res) {
          wx.showToast({
            title: '上传失败',
            icon: 'none'
          })
        }
      })
    },
    fail: function(res) {
      wx.showToast({
        title: '读取文件失败',
        icon: 'none'
      })
    }
  })
}

1. 在服务器端编写接收并保存图片的php代码。

$image = $_POST['imagebase64str'];
$image = str_replace('data:image/png;base64,', '', $image);
$image = str_replace(' ', '+', $image);
$data = base64_decode($image);
$file = 'uploads/'.date('YmdHis').'.png';
$success = file_put_contents($file, $data);
if($success) {
  echo '上传成功';
}else {
  echo '上传失败';
}

示例2

场景：在微信小程序中上传多张图片至php服务器上，并返回上传成功或失败的提示。

步骤：

1. 在微信小程序端使用wx.chooseImage函数选择多张图片。

wx.chooseImage({
  count: 9,
  success: function (res) {
    var tempFilePaths = res.tempFilePaths
    uploadImages(tempFilePaths)
  }
})

1. 编写uploadImages函数，将选择的多张图片上传到服务器上。

function uploadImages(paths) {
  var count = 0
  var length = paths.length
  for(var i = 0; i < length; i++) {
    const fs = wx.getFileSystemManager()
    fs.readFile({
      filePath: paths[i],
      encoding: 'base64',
      success: function(res) {
        var base64Data = res.data
        wx.request({
          url: '上传接口url地址',
          method: 'POST',
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          data: {
            imagebase64str: base64Data
          },
          success: function(res) {
            count++
            if(count == length) {
              wx.showToast({
                title: '上传成功',
                icon: 'success'
              })
            }
          },
          fail: function(res) {
            wx.showToast({
              title: '上传失败',
              icon: 'none'
            })
          }
        })
      },
      fail: function(res) {
        wx.showToast({
          title: '读取文件失败',
          icon: 'none'
        })
      }
    })
  }
}

1. 在服务器端编写接收并保存多张图片的php代码。

for($i=0; $i<count($_FILES['file']['name']); $i++) {
  $name = $_FILES['file']['name'][$i];
  $tmp = $_FILES['file']['tmp_name'][$i];
  $file = 'uploads/'.date('YmdHis').'_'.$name;
  $success = move_uploaded_file($tmp, $file);
  if($success) {
    echo '上传成功';
  }else {
    echo '上传失败';
  }
}

以上是关于“微信小程序上传图片到php服务器的方法”的完整攻略，希望对你有所帮助。