uni-app系統目錄文件上傳（非只圖片和視頻）解決方案

背景

公司領導提出這樣的產品需求：需要上傳目錄文件，不只是圖片和視頻，而且同時要支持Android和IOS兩大移動端。另外公司App的架構採用的是uni-app。

思考

• 第一個想到的方案就是，看uni-app框架能否支持。答案可想而知，uni-app組件本身沒有提供文件上傳組件，不支持<input type="file"/>
• uni-app App端內置HTML5+引擎，提供plus接口，對於Android系統可以直接調用Android系統函數，打開系統目錄。而對於IOS而言，沒有找到使用方法
• 既然內置HTML5+引擎，能否直接嵌入H5頁面呢？當然可以。於是採用H5方式實現

H5頁面文件上傳

嵌入H5頁面，需要採用web-view標籤，如下：

<web-view src="/hybrid/html/index.html" @message="handleMessage"></web-view>

注意：

• h5頁面必須在項目目錄：/hybrid/html/下面，因爲這樣uni-app纔不會進行編譯
• @message事件是h5頁面嚮應用發送數據的回調

web-view傳遞數據問題

1、@message

第一種解決方法：通過@message傳遞數據，在h5頁面中，上傳完文件後，獲取上傳後的文件信息，直接postMessage後，web-view頁面會接收

uni.postMessage({
    data: {
        action: data
    }
});

問題

當運行代碼的時候，並沒有執行@message回調，需要點擊h5頁面返回的時候，纔會調用回調函數。於是在執行完postMessage後，調用如下函數返回上一級頁面

uni.navigateBack({
    delta: 1
});

注意：

• 在h5頁面中調用uni-app接口時，需要添加uni SDK

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>

• 如果要讓web-view的上一級頁面，即表單頁面接收數據，解決方法是：放到store中，表單頁面從store中獲取

2、頁面跳轉url傳遞數據

第二種解決方法：通過頁面跳轉url傳遞數據。在h5頁面上傳完文件後，調用頁面跳轉函數，將文件數據放到url參數中，如下：

uni.redirectTo({
    url: './h5Upload?fileData=' + data,
})

demo

github：https://github.com/silianpan/...

• 兩種方案

• 表單頁

• 選擇系統目錄文件

• 頁面跳轉url傳遞數據

附：Android選擇系統目錄

轉載請註明：溜爸 » uni-app系統目錄文件上傳（非只圖片和視頻）解決方案