一、背景介紹
隨著網路科技的不斷發展,越來越多的網路應用程式需要支援圖片上傳功能。而uniapp是目前非常流行的行動端開發框架,具有跨平台、高效、易用等特性。然而,當我們使用uniapp開發多圖上傳功能時,就會遇到一些問題:伺服器無法正確接收請求,無法取得到傳遞的圖片資訊。本文將探討這個問題的可能原因和解決方案。
二、問題描述
我們使用uniapp提供的上傳元件外掛程式uni-upload
開發多圖上傳功能,使用PHP 後端程式碼來接收上傳請求和儲存圖片資訊。上傳頁面程式碼如下:
<template> <view class="container"> <view class="uploadBtn" @tap="chooseImage"> <image src="../../static/plus.png"></image> </view> <view class="image-list"> <view class="image-item" v-for="(item, index) in fileList" :key="index"> <image :src="item.path"></image> <view class="delete" @tap="deleteImage(index)">删除</view> </view> </view> <view class="submitBtn" @tap="submit"> 提交 </view> </view> </template> <script> import uniUpload from "@/components/uni-upload/uni-upload.vue"; export default { components: { uniUpload }, data() { return { fileList: [], }; }, methods: { chooseImage() { uni.chooseImage({ count: 9, success: (res) => { this.fileList = [...this.fileList, ...res.tempFilePaths.map((path) => ({ path }))]; }, }); }, deleteImage(index) { this.fileList.splice(index, 1); }, submit() { const formData = new FormData(); this.fileList.forEach((item, index) => { formData.append(`file${index}`, item.path); }); uni.request({ method: "POST", url: "http://localhost/upload.php", header: { "Content-Type": "multipart/form-data", }, data: formData, success: (res) => { console.log("upload success", res.data); }, fail: (error) => { console.log("upload fail", error); }, }); }, }, }; </script>
上傳元件採用了uni-upload
插件,透過chooseImage
方法呼叫相簿選擇圖片,將tempFilePaths
中的圖片路徑填入fileList
中,同時在submit
方法中將fileList
中的圖片路徑上傳到後端伺服器。
在伺服器端,我們使用PHP作為後端語言,程式碼如下:
<?php $upload_dir = "uploads/"; if (!file_exists($upload_dir)) { mkdir($upload_dir); } foreach ($_FILES as $key => $file) { $tmp_name = $file["tmp_name"]; $name = $file["name"]; if (move_uploaded_file($tmp_name, $upload_dir . $name)) { echo "upload success "; } else { echo "upload fail "; } } ?>
在本機測試中發現,在提交圖片後,後端伺服器無法正確讀取上傳請求,不能正確地保存圖片。下面將會提出一些解決方案。
三、問題原因
根據錯誤提示,可能是檔案上傳方式不正確導致的。而 FormData 和 multipart/form-data 是現在用來表單實現文件上傳的一種重要方式,但是如果不設置合適的請求頭信息,伺服器無法正確獲取上傳文件,這可能是造成這個問題的原因。
四、解決方案
#在上傳請求中增加頭部內容type 與boundary ,其中type 是發送請求時的Content-Type, boundary 部分是分割資料的隨機字串。
uni.request({
method: "POST",
url: "http://localhost/upload.php",
header: {
"Content-Type": "multipart/form-data; boundary=" + Math.random().toString().substr(2),
},
data: formData,
success: (res) => {
console.log("upload success", res.data);
},
fail: (error) => {
console.log("upload fail", error);
} ,
});
在客戶端,我們透過表單資料append 的方式將檔案清單拼裝成formData 。此時,每個檔案的 key 預設是它在 formData 中的位置,即從 0 開始的遞增數字。而伺服器接收的key 可能是上傳元件裡面指定的name
值,因此,上傳檔案時可以為每個檔案指定一個key 名稱,如下:
this.fileList. forEach((item, index) => {
formData.append("file" index, item.path);
});
由於這裡的file
不同於上傳元件的name
屬性值,因此在後端處理時也應對應修改。
foreach($_FILES as $file) {
$tmp_name = $file["tmp_name"];
$name = $file["name"];
if (move_uploaded_file( $tmp_name, $upload_dir . $name)) {
echo "upload success ";
} else {
echo "upload fail ";
}
}
php.ini 檔案中增加以下參數:
upload_max_filesize=20M
max_execution_time=600
max_input_time=600
以上是uniapp多圖上傳php接受不到怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章!