当前位置：首页 > news >正文

微信小程序学习实录9：掌握wx.chooseMedia实现多图片文件上传功能（选择图片、预览图片、上传图片）

news 2025/6/25 15:58:50

要实现多图片上传到服务器，需要在小程序前端和PHP后端分别进行相应的设置。

基本流程

微信小程序提供了丰富的API来支持多图片上传功能。在微信小程序中实现多图片的选择、预览以及上传到服务器的功能：

1. 选择图片

使用 wx.chooseImage API 可以让用户从相册或相机选择一张或多张图片。这个API可以设置用户可以选择的图片数量上限（默认9张）。

Page({data: {images: [] // 用于存储用户选择的图片临时路径},// 选择图片chooseImage: function () {const that = this;wx.chooseImage({count: 9, // 用户最多可以选择的图片张数，默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// tempFilePaths为一个数组，包含了所选图片的本地临时文件路径const tempFilePaths = res.tempFilePaths;that.setData({images: tempFilePaths});}});}
});

2. 预览图片

当用户选择了图片后，你可以提供一个界面来预览这些图片。这可以通过 wx.previewImage API 来实现，它允许用户在一个全屏界面中查看图片。

// 在页面WXML中定义一个展示图片的区域
<view class="image-list"><image src="{{item}}" mode="aspectFit" bindtap="previewImage" data-current="{{index}}" wx:for="{{images}}" wx:key="*this" style="width: 100px; height: 100px; margin: 5px;"></image>
</view>// 在页面JS中处理预览事件
Page({// ... 其他代码 ...previewImage: function (e) {const current = e.currentTarget.dataset.current; // 获取当前点击图片的索引wx.previewImage({current: this.data.images[current], // 当前显示图片的http链接urls: this.data.images // 需要预览的图片http链接列表});}// ... 其他代码 ...
});

3. 上传图片

使用 wx.uploadFile API 可以将选择的图片逐个上传到服务器。你可以在循环中调用该API来上传每一张图片。

// 上传图片
uploadImages: function () {const that = this;const uploadPromises = this.data.images.map(function (path, index) {return new Promise((resolve, reject) => {wx.uploadFile({url: 'https://yourserver.com/upload', // 你的服务器地址filePath: path,name: 'file',formData: {'user': 'test' // 其他额外参数},success: function (res) {console.log('上传成功：', res);resolve(res);},fail: function (err) {console.error('上传失败：', err);reject(err);}});});});// 所有图片上传完毕后的操作Promise.all(uploadPromises).then(responses => {console.log('所有图片已上传：', responses);// 更新UI或其他逻辑}).catch(error => {console.error('部分或全部图片上传失败：', error);// 错误处理});
}

PHP 后端

在PHP后端，编写脚本来接收并保存这些图片。

<?php
header('Content-Type: application/json');if ($_SERVER['REQUEST_METHOD'] == 'POST') {$target_dir = "uploads/"; // 设置目标文件夹if (!is_dir($target_dir)) {mkdir($target_dir, 0777, true); // 如果目录不存在则创建}if (isset($_FILES['files'])) {$file = $_FILES['files'];$filename = basename($file['name']);$target_file = $target_dir . uniqid() . '_' . $filename; // 使用uniqid生成唯一文件名if (move_uploaded_file($file['tmp_name'], $target_file)) {echo json_encode(['status' => 'success', 'message' => '文件上传成功', 'file_path' => $target_file]);} else {http_response_code(500);echo json_encode(['status' => 'error', 'message' => '文件移动失败']);}} else {http_response_code(400);echo json_encode(['status' => 'error', 'message' => '缺少文件']);}
} else {http_response_code(405); // Method Not Allowedecho json_encode(['status' => 'error', 'message' => '请求方法不支持']);
}
?>

在这个PHP脚本中，我们检查是否有文件被上传，并且将其移动到目标文件夹。为了避免文件名冲突，我们使用了 uniqid() 函数来生成唯一的文件名前缀。

注意事项

确保服务器上的 uploads 目录存在并且有写权限。
在生产环境中，可能需要增加更多的安全措施，比如验证文件类型、大小限制等。
考虑到用户体验，你可以在上传过程中显示进度条或提示信息。
如果需要一次性处理多个文件上传，而不是逐个处理，那么可能需要修改前端代码，将所有文件一起发送到服务器，并在服务器端循环处理每个文件。

一次性处理多个文件上传

Page({data: {images: [] // 用于存储用户选择的图片路径},// 选择图片chooseImage: function () {var that = this;wx.chooseImage({count: 9, // 用户最多可以选择的图片张数，默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {const tempFilePaths = res.tempFilePaths;that.setData({images: tempFilePaths});that.uploadImages(tempFilePaths);}});},// 上传图片uploadImages: function (tempFilePaths) {const formData = new FormData();tempFilePaths.forEach((filePath, index) => {formData.append('files[]', { uri: filePath, name: 'image' + (index + 1) + '.jpg', type: 'image/jpeg' });});wx.request({url: utils.host_domain + 'api/upload.php', // 你的PHP接口地址method: 'POST',header: {'content-type': 'multipart/form-data'},formData: formData,success: function (res) {console.log('图片上传成功: ', res.data);},fail: function () {console.error('图片上传失败');}});}
});

<?php
// api/upload.phpheader('Content-Type: application/json');if ($_SERVER['REQUEST_METHOD'] == 'POST') {$target_dir = "uploads/"; // 设置目标文件夹if (!is_dir($target_dir)) {mkdir($target_dir, 0777, true); // 如果目录不存在则创建}$uploadedFiles = [];$errors = [];if (isset($_FILES['files'])) {$files = $_FILES['files'];foreach ($files['name'] as $key => $value) {if ($files['error'][$key] === UPLOAD_ERR_OK) {$filename = basename($files['name'][$key]);$target_file = $target_dir . uniqid() . '_' . $filename; // 使用uniqid生成唯一文件名if (move_uploaded_file($files['tmp_name'][$key], $target_file)) {$uploadedFiles[] = $target_file;} else {$errors[] = "文件移动失败: " . $filename;}} else {$errors[] = "文件上传错误: " . $files['error'][$key];}}} else {http_response_code(400);echo json_encode(['status' => 'error', 'message' => '缺少文件']);exit;}if (empty($errors)) {echo json_encode(['status' => 'success', 'message' => '所有文件上传成功', 'file_paths' => $uploadedFiles]);} else {http_response_code(500);echo json_encode(['status' => 'error', 'message' => '部分或全部文件上传失败', 'errors' => $errors, 'file_paths' => $uploadedFiles]);}
} else {http_response_code(405); // Method Not Allowedecho json_encode(['status' => 'error', 'message' => '请求方法不支持']);
}
?>