Uniapp中如何上傳非圖片和錄音文件

隨著行動互聯網的發展，行動應用程式的開發變得越來越重要，而通用框架的出現大大簡化了開發的流程，Uniapp作為一個基於Vue.js的跨平台開發框架，也備受開發者的青睞。在Uniapp中，我們可以非常方便地上傳圖片和語音，但是對於其他類型的文件，如文字、影片等，又該如何上傳呢？本文將會詳細介紹在Uniapp中如何上傳非圖片和錄音檔案。

一、前置準備

在上傳之前，我們需要做以下準備工作：

1. 在manifest.json中新增權限

我們需要在manifest.json檔案中新增檔案讀取的權限，具體內容如下：

{
    "mp-weixin": {
        "permission": {
            "scope.userLocation": {
                "desc": "读取文件时需要获取您的授权"
            }
        }
    }
}

2. 安裝Uniapp的uni-request庫

Uniapp提供了一個網路請求封裝庫，名為uni-request，我們需要先安裝它，以便後面使用。在HBuilderX中，使用以下指令安裝：

npm install --save uni-request

這裡我們選擇npm方式進行安裝，當然您也可以將其下載到本機，並將其作為static目錄的一部分，這樣可以在離線情況下使用。

二、檔案上傳流程

1. 選擇檔案

首先，我們需要引入一個內建的chooseFile方法，它可以彈出檔案選擇框，讓使用者選擇要上傳的檔案。選擇後，該方法會回調一個檔案路徑。

uni.chooseFile({
    count: 1, // 最多选择1个文件
    type: 'file', // 只允许选择文件
    success: function (res) {
        console.log(res.tempFiles[0].path);
        // 此处拿到文件路径传到下一步中
    }
});

2. 取得檔案內容

接下來，我們需要將所選的檔案讀取出來，以便後面上傳。這裡我們使用uni-request的post方法，將檔案路徑當作參數傳遞過去，然後再把檔案回傳提交。

uni.chooseFile({
    count: 1,
    type: 'file',
    success: function (res) {
        uni.getFileSystemManager().readFile({
            filePath: res.tempFiles[0].path,
            success: function (data) {
                uni.request({
                    url: 'http://yourpath/to/upload',
                    data: data.data,
                    method: 'post',
                    success: function (uploadRes) {
                        console.log(uploadRes);
                    }
                });
            }
        });
    }
});

這裡需要注意的是，我們使用了getFileSystemManager方法獲取到了文件系統管理器，然後使用該管理器下面的readFile方法讀取文件，最後拿到的是一個Buffer物件。而如果我們直接把Buffer物件當作參數傳遞過去，服務端可能需要額外的操作才能取得到文件，所以我們需要將其轉換為二進位流後再上傳。

3. 將Buffer物件轉換為二進位流

在上一個步驟中，我們已經把檔案讀取出來並且得到了一個Buffer物件。但是，我們需要將其轉換為二進位流，然後再進行上傳。這裡，我們可以使用一個現有的函式庫，如file-stream：

uni.chooseFile({
    count: 1,
    type: 'file',
    success: function (res) {
        uni.getFileSystemManager().readFile({
            filePath: res.tempFiles[0].path,
            success: function (data) {
                const stream = require('file-stream').createReadStream(data.data);
                stream.on('data', function (chunk) {
                    uni.request({
                        url: 'http://yourpath/to/upload',
                        data: chunk,
                        method: 'post',
                        success: function (uploadRes) {
                            console.log(uploadRes);
                        }
                    });
                });
            }
        });
    }
});

這樣，我們就成功把Buffer物件轉換為二進位流，並上傳到伺服器上了。需要注意的是，在file-stream庫中，我們使用了createReadStream方法建立了一個流，然後使用on('data')方法來監聽資料片段的傳輸過程，最後傳遞到uni.request的data中，完成上傳。

三、總結

在Uniapp中上傳非圖片和錄音檔案需要經過多個步驟，包括檔案選擇、讀取檔案內容、轉換為二進位串流和上傳伺服器等。但是，Uniapp和uni-request的API都非常好用，因此這個過程就變得十分簡單和清晰了。

當然，我們也可以使用其他一些函式庫來實作檔案上傳，如multer等。在使用過程中，我們需要注意資料的流向和處理方式，以免發生一些不必要的問題。

以上是Uniapp中如何上傳非圖片和錄音文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！