微信小程序图片选择、上传到服务器、预览（PHP）实现实例

下面就是关于“微信小程序图片选择、上传到服务器、预览 (PHP)实现实例”的完整攻略。

1. 微信小程序图片选择

在微信小程序中，我们可以使用chooseImage接口上传图片。该接口会调起用户的相册，并允许用户在相册中选择一张或者多张图片。具体的调用方式如下：

wx.chooseImage({
  count: 1, // 最多选择一张图片
  success: function (res) {
    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
    var tempFilePaths = res.tempFilePaths;
  }
});

2. 将图片上传到服务器

图片被选择后，我们需要将它们上传到服务器。为了上传图片，我们需要通过小程序的wx.uploadFile接口上传文件。下面是一个示例，演示了如何将图片上传到服务器：

wx.chooseImage({
  success: function(res) {
    var tempFilePaths = res.tempFilePaths;
    wx.uploadFile({
      url: 'https://www.example.com/upload.php', // 上传图片的接口地址
      filePath: tempFilePaths[0], // 要上传的图片的本地文件路径
      name: 'file', // 上传文件的名称，后台可以通过$_FILES['file']来获取这个文件对象
      success: function(res){
        var data = res.data
        //do something
      }
    })
  }
})

3. 在服务器端保存图片

接下来，我们需要在服务器端保存上传的图片。可以使用move_uploaded_file函数将上传的文件保存在服务器上指定的目录中。在此之前，我们需要确保目标文件夹有足够的权限来保存这些文件。

//根据时间生成随机的文件名
$target_file = "uploads/" . time() . rand(1000, 9999) . ".jpg";
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
  echo "The file ". basename( $_FILES["file"]["name"]). " has been uploaded.";
} else {
  echo "Sorry, there was an error uploading your file.";
}

4. 预览上传的图片

上传图片后，我们可以在小程序中预览这些上传的图片。为了实现这个功能，我们可以使用wx.previewImage接口预览图片。这个接口可以支持本地图片和远程图片，但是本文只讨论本地图片的预览。下面是一个示例：

wx.chooseImage({
  success: function (res) {
    var tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://www.example.com/upload.php',
      filePath: tempFilePaths[0],
      name: 'file',
      success: function(res){
        var data = res.data
        // 上传图片成功后，预览图片
        wx.previewImage({
          urls: [tempFilePaths[0]]
        })
      }
    })
  }
})

示例说明

示例1: 上传图片和预览

下面是一个示例，在此示例中，我们编写了一个小程序，用于选择图片，将这些图片上传到服务器，并在上传完成后浏览这些图片：

//app.js
App({
  // ...
  onLaunch: function () {
    // ...
  }
})

//pages/index/index.js
Page({
  data: {
    images: []
  },
  chooseImage: function () {
    var self = this
    wx.chooseImage({
      count: 1, //最多选择一张图片
      success: function(res) {
        var tempFilePaths = res.tempFilePaths;
        wx.uploadFile({
          url: 'https://www.example.com/upload.php',
          filePath: tempFilePaths[0],
          name: 'file',
          success: function(res){
            var data = res.data;

            //上传成功后，就可以预览图片了
            wx.previewImage({
              urls: [tempFilePaths[0]]
            })

            //将上传的图片保存到数组中，便于显示
            var images = self.data.images.concat(tempFilePaths);
            self.setData({
              images: images
            });
          }
        })
      }
    })
  }
})

示例2: 上传多张图片

下面是另一个示例，在此示例中，我们编写了一个小程序，用于选择多张图片，将这些图片上传到服务器：

//app.js
App({
  // ...
  onLaunch: function () {
    // ...
  }
})

//pages/index/index.js
Page({
  data: {
    images: []
  },
  chooseImage: function () {
    var self = this
    wx.chooseImage({
      count: 9, //最多选择9张图片
      success: function(res) {
        var tempFilePaths = res.tempFilePaths;
        wx.showLoading({
          title: '图片上传中',
        });
        //循环上传每一张图片
        for (var i = 0; i < tempFilePaths.length; i++) {
          wx.uploadFile({
            url: 'https://www.example.com/upload.php',
            filePath: tempFilePaths[i],
            name: 'file',
            success: function (res) {
              var data = res.data;
              //将上传的图片保存到数组中，便于显示
              var images = self.data.images.concat(tempFilePaths[i]); //这里的i是不会有用的
              self.setData({
                images: images
              });
            },
            complete: function () {
              wx.hideLoading();
            }
          })
        }

      }
    })
  }
})

这就是关于“微信小程序图片选择、上传到服务器、预览（PHP）实现实例”的完整攻略，希望能对你有所帮助。