微信小程序多图上传到服务器实战教程

本文主要探讨了如何在微信小程序中实现多图上传至服务器，并获取返回的图片路径。通过示例代码，文章详细讲解了选择图片、显示预览以及执行上传操作的步骤，对于学习和工作中处理类似问题具有参考价值。 在微信小程序中，上传图片是一个常见的功能。首先，我们需要监听用户选择图片的事件。通过`wx.chooseImage`方法，我们可以让用户从相册或相机中选取图片。这个方法接受几个参数，如`count`定义可选图片数量，`sizeType`可以选择原图或压缩图，`sourceType`则定义图片来源。当用户选择图片后，`success`回调函数会被调用，将所选图片的临时路径存入`tempFilePaths`数组。 ```javascript chooseImage: function() { var that = this; wx.chooseImage({ count: 9, // 默认9张 sizeType: ['original', 'compressed'], // 原图和压缩图 sourceType: ['album', 'camera'], // 相册和相机 success: function(res) { that.setData({ tempFilePaths: that.data.tempFilePaths.concat(res.tempFilePaths) // 使用concat方法追加新选图片 }) } }) }, ``` 接下来，我们可以使用`<image>`组件展示选择的图片，通过`wx:for`指令遍历`tempFilePaths`数组，为每张图片设置`src`属性。同时，可以通过`bindtap`事件处理删除图片的操作。 ```html <view class="image-wrap"> <image class="icon-image" background-size="contain" wx:for="{{tempFilePaths}}" src="{{item}}" data-id="{{index}}" bindtap="delete"></image> </view> ``` 对于多图上传，通常需要一个循环来处理每个文件。在本例中，`upload`函数遍历`tempFilePaths`数组，对每个文件调用`upload_file`方法： ```javascript upload: function() { for (var i = 0; i < this.data.tempFilePaths.length; i++) { this.upload_file(this.data.tempFilePaths[i]); } }, ``` `upload_file`函数使用`wx.uploadFile`上传图片到服务器。这个方法需要指定服务器接口URL（此处已省略），设置请求头，以及要上传的文件路径。需要注意的是，微信小程序上传图片时，通常需要服务器端配合处理，例如将图片保存到云存储服务（如阿里云OSS）。 ```javascript upload_file: function(filepath) { var that = this; wx.uploadFile({ url: 'https://your-server-url/endpoint', // 服务器接口URL header: { 'content-type': 'multipart/form-data' // 设置上传文件的Content-Type }, filePath: filepath, name: 'file', // 文件字段名，服务器端需对应接收 success: function(res) { var serverUrl = res.data; // 服务器返回的图片URL // 在此处处理返回的图片URL，例如存储到数据库或更新UI }, fail: function(err) { // 处理上传失败的情况 } }); } ``` 总结来说，微信小程序的多图上传涉及`wx.chooseImage`、`wx.uploadFile`等多个API的使用，需要结合服务器端接口实现。通过以上步骤，开发者可以实现在小程序中让用户选择图片，然后将这些图片上传到服务器并获取返回的图片URL。在实际开发中，还需要考虑错误处理、进度提示等用户体验优化。