使用uniapp實作檔案上傳功能

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特定參數的介紹：

• #url：上傳介面的位址；
• filePath：上傳檔案的本機路徑;
• name：上傳檔案的name 值，後端介面中需要接收此參數；
• success：上傳成功後的回呼函數。

這樣，前端部分的程式碼就完成了。

後端部分：

在後端，需要處理上傳過來的檔案資訊。這裡我們以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中文網其他相關文章！