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中文網其他相關文章!