uniapp是一種基于vue.js框架的跨平臺(tái)應(yīng)用開(kāi)發(fā)框架，可以實(shí)現(xiàn)一次編寫，多平臺(tái)部署的效果。在實(shí)際應(yīng)用中，文件上傳是一個(gè)常見(jiàn)的需求，比如說(shuō)圖片上傳、視頻上傳等等。本文將詳細(xì)介紹如何使用uniapp實(shí)現(xiàn)文件上傳功能，以及提供具體的代碼示例。
實(shí)現(xiàn)文件上傳的基本思路是：先在前端將選中的文件進(jìn)行打包，然后發(fā)送給后端進(jìn)行處理。uniapp中可利用官方提供的uni.uploadFile方法實(shí)現(xiàn)文件上傳。uni.uploadFile方法可以將本地資源上傳至遠(yuǎn)程服務(wù)器，上傳過(guò)程采用分片上傳，可實(shí)現(xiàn)穩(wěn)定可靠的文件上傳。
實(shí)現(xiàn)文件上傳功能前，需要先安裝uniapp-cli的環(huán)境，以及對(duì)應(yīng)的uniapp框架版本。
接下來(lái)，我們就來(lái)看一下具體代碼實(shí)現(xiàn)。
前端部分：
在前端頁(yè)面中，需要設(shè)置文件上傳的表單，以及設(shè)置上傳的按鈕。代碼如下：
1、在HTML頁(yè)面中設(shè)置文件上傳表單：
<form> <input type="file" id="fileInput" multiple="multiple"> </form>
登錄后復(fù)制
其中，<input type="file">標(biāo)簽設(shè)置了文件上傳的入口，在點(diǎn)擊上傳按鈕時(shí)，會(huì)自動(dòng)調(diào)出系統(tǒng)文件選擇對(duì)話框。
2、在HTML頁(yè)面中設(shè)置上傳按鈕：
<button type="button" @click="uploadFile">上傳</button>
登錄后復(fù)制
在按鈕上設(shè)置@click事件，當(dāng)用戶點(diǎn)擊上傳按鈕時(shí)，觸發(fā)uploadFile函數(shù)進(jìn)行上傳操作。
3、在JS文件中編寫uploadFile函數(shù)：
uploadFile() {
uni.chooseImage({
count: 1, // 可上傳的圖片數(shù)量，為1表示單張上傳
success: function (res) {
uni.showLoading({
title: "上傳中，請(qǐng)稍候..."
});
uni.uploadFile({
url: "http://localhost:8081/upload.php", // 上傳接口地址
filePath: res.tempFilePaths[0], // 上傳文件的本地路徑
name: "uploadfile", // 上傳文件對(duì)應(yīng)的 key 值
success: function (result) {
uni.hideLoading();
console.log(result);
uni.showToast({
title: "上傳成功!",
duration: 2000
});
}
});
}
});
}
登錄后復(fù)制
其中，uni.chooseImage用于打開(kāi)系統(tǒng)相冊(cè)，uni.showLoading用于展示上傳中的加載框，uni.uploadFile用于發(fā)送上傳文件的請(qǐng)求。
關(guān)于uni.uploadFile具體參數(shù)的介紹：
url：上傳接口的地址；filePath：上傳文件的本地路徑；name：上傳文件的 name 值，后端接口中需要接收該參數(shù)；success：上傳成功后的回調(diào)函數(shù)。
這樣，前端部分的代碼就完成了。
后端部分：
在后端，需要處理上傳過(guò)來(lái)的文件信息。這里我們以PHP語(yǔ)言為例，編寫相應(yīng)的處理邏輯。
1、創(chuàng)建upload.php文件，用于上傳處理：
<?php
$uploaddir = './upload/'; //文件上傳的目錄，需要事先創(chuàng)建好
$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' => '上傳失敗！'
));
}
?>
登錄后復(fù)制
其中，move_uploaded_file函數(shù)用于移動(dòng)臨時(shí)文件到指定目錄。這里上傳的文件會(huì)被重命名，使用原始文件名可能會(huì)產(chǎn)生沖突。需要注意的是，上傳目錄需要在服務(wù)器上提前創(chuàng)建好。
2、啟動(dòng)一個(gè)PHP服務(wù)，作為后端服務(wù)器，監(jiān)聽(tīng)上傳請(qǐng)求。在本地安裝xampp或wampserver，啟動(dòng)后，在瀏覽器中輸入localhost/xxx/upload.php即可訪問(wèn)上傳服務(wù)，其中xxx為upload.php存放的文件夾位置。
這樣，后端部分的代碼就完成了，可以通過(guò)服務(wù)器地址將文件上傳到指定目錄。
總結(jié)：
本文介紹了使用uniapp實(shí)現(xiàn)文件上傳功能的具體步驟，主要包括前端和后端兩部分。通過(guò)前端設(shè)置文件上傳表單以及上傳按鈕，并在JS文件中編寫上傳函數(shù)；后端使用PHP編寫上傳服務(wù)，監(jiān)聽(tīng)上傳請(qǐng)求，將文件上傳到指定目錄。在前端向后端發(fā)送上傳請(qǐng)求時(shí)，使用uni.uploadFile方法進(jìn)行文件上傳，可以提供穩(wěn)定可靠的上傳服務(wù)。
