uniapp是一種基於vue.js框架的跨平台應用程式開發框架，可以實現一次編寫，多平台部署的效果。在實際應用中，文件上傳是常見的需求，例如圖片上傳、影片上傳等等。本文將詳細介紹如何使用uniapp實作檔案上傳功能，以及提供具體的程式碼範例。
實作檔案上傳的基本想法是：先在前端將選取的檔案進行打包，然後傳送給後端進行處理。 uniapp中可利用官方提供的uni.uploadFile方法實作檔案上傳。 uni.uploadFile方法可以將本機資源上傳至遠端伺服器，上傳過程會採用分片上傳，可實現穩定可靠的檔案上傳。
實現檔案上傳功能前，需要先安裝uniapp-cli的環境，以及對應的uniapp框架版本。
接下來，我們就來看看具體程式碼實作。
前端部分：
在前端頁面中，需要設定檔案上傳的表單，以及設定上傳的按鈕。程式碼如下：
1、在HTML頁面中設定檔案上傳表單：
<form> <input type="file" id="fileInput" multiple="multiple"> </form>
#其中，<input type="file">標籤設定了檔案上傳的入口，點選上傳按鈕時，會自動調出系統檔案選擇對話框。
2、在HTML頁面中設定上傳按鈕：
<button type="button" @click="uploadFile">上传</button>
在按鈕上設定@click事件，當使用者點擊上傳按鈕時，觸發uploadFile函數進行上傳操作。
3、在JS檔案中寫uploadFile函數：
uploadFile() {
uni.chooseImage({
count: 1, // 可上传的图片数量，为1表示单张上传
success: function (res) {
uni.showLoading({
title: "上传中，请稍候..."
});
uni.uploadFile({
url: "http://localhost:8081/upload.php", // 上传接口地址
filePath: res.tempFilePaths[0], // 上传文件的本地路径
name: "uploadfile", // 上传文件对应的 key 值
success: function (result) {
uni.hideLoading();
console.log(result);
uni.showToast({
title: "上传成功!",
duration: 2000
});
}
});
}
});
}其中，uni.chooseImage用於開啟系統相冊，uni.showLoading用於展示上傳中的載入框，uni.uploadFile用來傳送上傳檔案的請求。
關於uni.uploadFile特定參數的介紹：
這樣，前端部分的程式碼就完成了。
後端部分：
在後端，需要處理上傳過來的檔案資訊。這裡我們以PHP語言為例，寫出對應的處理邏輯。
1、建立upload.php文件，用於上傳處理：
<?php
$uploaddir = './upload/'; //文件上传的目录，需要事先创建好
$filename = $_FILES['uploadfile']['name']; // 获取上传文件的名称
$uploadfile = $uploaddir . $filename;
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $uploadfile)) { //上传成功
echo json_encode(array(
'success' => true,
'msg' => '上传成功！'
));
}
else { //上传失败
echo json_encode(array(
'success' => false,
'msg' => '上传失败！'
));
}
?>其中，move_uploaded_file函數用於移動臨時文件到指定目錄。這裡上傳的檔案會被重新命名，使用原始檔案名稱可能會產生衝突。要注意的是，上傳目錄需要在伺服器上事先建立好。
2、啟動一個PHP服務，作為後端伺服器，監聽上傳請求。在本機安裝xampp或wampserver，啟動後，在瀏覽器中輸入localhost/xxx/upload.php即可存取上傳服務，其中xxx為upload.php存放的資料夾位置。
這樣，後端部分的程式碼就完成了，可以透過伺服器位址將檔案上傳到指定目錄。
總結：
本文介紹了使用uniapp實作檔案上傳功能的具體步驟，主要包括前端和後端兩部分。透過前端設定檔上傳表單以及上傳按鈕，並在JS檔案中編寫上傳函數；後端使用PHP編寫上傳服務，監聽上傳請求，將檔案上傳到指定目錄。在前端向後端發送上傳請求時，使用uni.uploadFile方法進行檔案上傳，可以提供穩定可靠的上傳服務。
以上是使用uniapp實作檔案上傳功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
