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傳遞數據問題

一、@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中獲取

二、頁面跳轉url傳遞數據

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

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

demo

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

• 兩種方案

• 表單頁

• 選擇系統目錄文件

• 頁面跳轉url傳遞數據

附：Android選擇系統目錄

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