要實(shí)現(xiàn)多圖片上傳到服務(wù)器，需要在小程序前端和PHP后端分別進(jìn)行相應(yīng)的設(shè)置。

基本流程

微信小程序提供了豐富的API來(lái)支持多圖片上傳功能。在微信小程序中實(shí)現(xiàn)多圖片的選擇、預(yù)覽以及上傳到服務(wù)器的功能：

1. 選擇圖片

使用 wx.chooseImage API 可以讓用戶(hù)從相冊(cè)或相機(jī)選擇一張或多張圖片。這個(gè)API可以設(shè)置用戶(hù)可以選擇的圖片數(shù)量上限（默認(rèn)9張）。

Page({data: {images: [] // 用于存儲(chǔ)用戶(hù)選擇的圖片臨時(shí)路徑},// 選擇圖片chooseImage: function () {const that = this;wx.chooseImage({count: 9, // 用戶(hù)最多可以選擇的圖片張數(shù)，默認(rèn)9sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有success: function (res) {// tempFilePaths為一個(gè)數(shù)組，包含了所選圖片的本地臨時(shí)文件路徑const tempFilePaths = res.tempFilePaths;that.setData({images: tempFilePaths});}});}
});

2. 預(yù)覽圖片

當(dāng)用戶(hù)選擇了圖片后，你可以提供一個(gè)界面來(lái)預(yù)覽這些圖片。這可以通過(guò) wx.previewImage API 來(lái)實(shí)現(xiàn)，它允許用戶(hù)在一個(gè)全屏界面中查看圖片。

// 在頁(yè)面WXML中定義一個(gè)展示圖片的區(qū)域
<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>// 在頁(yè)面JS中處理預(yù)覽事件
Page({// ... 其他代碼 ...previewImage: function (e) {const current = e.currentTarget.dataset.current; // 獲取當(dāng)前點(diǎn)擊圖片的索引wx.previewImage({current: this.data.images[current], // 當(dāng)前顯示圖片的http鏈接urls: this.data.images // 需要預(yù)覽的圖片http鏈接列表});}// ... 其他代碼 ...
});

3. 上傳圖片

使用 wx.uploadFile API 可以將選擇的圖片逐個(gè)上傳到服務(wù)器。你可以在循環(huán)中調(diào)用該API來(lái)上傳每一張圖片。

// 上傳圖片
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', // 你的服務(wù)器地址filePath: path,name: 'file',formData: {'user': 'test' // 其他額外參數(shù)},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);// 錯(cuò)誤處理});
}

PHP 后端

在PHP后端，編寫(xiě)腳本來(lái)接收并保存這些圖片。

<?php
header('Content-Type: application/json');if ($_SERVER['REQUEST_METHOD'] == 'POST') {$target_dir = "uploads/"; // 設(shè)置目標(biāo)文件夾if (!is_dir($target_dir)) {mkdir($target_dir, 0777, true); // 如果目錄不存在則創(chuàng)建}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' => '文件移動(dòng)失敗']);}} else {http_response_code(400);echo json_encode(['status' => 'error', 'message' => '缺少文件']);}
} else {http_response_code(405); // Method Not Allowedecho json_encode(['status' => 'error', 'message' => '請(qǐng)求方法不支持']);
}
?>

在這個(gè)PHP腳本中，我們檢查是否有文件被上傳，并且將其移動(dòng)到目標(biāo)文件夾。為了避免文件名沖突，我們使用了 uniqid() 函數(shù)來(lái)生成唯一的文件名前綴。

注意事項(xiàng)

• 確保服務(wù)器上的 uploads 目錄存在并且有寫(xiě)權(quán)限。
• 在生產(chǎn)環(huán)境中，可能需要增加更多的安全措施，比如驗(yàn)證文件類(lèi)型、大小限制等。
• 考慮到用戶(hù)體驗(yàn)，你可以在上傳過(guò)程中顯示進(jìn)度條或提示信息。
• 如果需要一次性處理多個(gè)文件上傳，而不是逐個(gè)處理，那么可能需要修改前端代碼，將所有文件一起發(fā)送到服務(wù)器，并在服務(wù)器端循環(huán)處理每個(gè)文件。

一次性處理多個(gè)文件上傳

Page({data: {images: [] // 用于存儲(chǔ)用戶(hù)選擇的圖片路徑},// 選擇圖片chooseImage: function () {var that = this;wx.chooseImage({count: 9, // 用戶(hù)最多可以選擇的圖片張數(shù)，默認(rèn)9sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有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/"; // 設(shè)置目標(biāo)文件夾if (!is_dir($target_dir)) {mkdir($target_dir, 0777, true); // 如果目錄不存在則創(chuàng)建}$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[] = "文件移動(dòng)失敗: " . $filename;}} else {$errors[] = "文件上傳錯(cuò)誤: " . $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' => '請(qǐng)求方法不支持']);
}
?>

---

@漏刻有時(shí)