首頁 > web前端 > uni-app > 主體

使用uniapp實作檔案上傳功能

WBOY
發布: 2023-11-21 16:39:27
原創
2887 人瀏覽過

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板