快捷導(dǎo)航

Uniapp打包Android文件選擇上傳問(wèn)題圖文詳解

更新時(shí)間：2025年06月09日 09:15:06 作者：EF@蛐蛐找糖

在移動(dòng)應(yīng)用開(kāi)發(fā)中,文件上傳是一項(xiàng)常見(jiàn)的功能,尤其在社交、云存儲(chǔ)以及各種服務(wù)類(lèi)應(yīng)用中,這篇文章主要介紹了Uniapp打包Android文件選擇上傳問(wèn)題的相關(guān)資料,需要的朋友可以參考下

需求

uniapp兼容android app，pc，h5的文件選擇并上傳功能。

需要支持拍照和相冊(cè)選擇，以及選擇其他類(lèi)型文件上傳~

實(shí)踐過(guò)程和問(wèn)題

開(kāi)始使用uni-file-picker組件

以為很順利，android模擬器測(cè)試……

忽略了平臺(tái)兼容性提示~??

Get：上傳圖片或拍照，使用uniapp自帶的uni.chooseImage即可……

還需要上傳非媒體問(wèn)題（圖片、音頻、影片）。本以為uni.chooseFile就OK了~

But

提示

uniapp提示：Android端可以使用Native.js

App端如需選擇非媒體文件，可在插件市場(chǎng)搜索文件選擇，其中Android端可以使用Native.js，無(wú)需原生插件，而iOS端需要原生插件。
App端如果想選擇下載到_doc、_downloads、_documents等plus.io控制的目錄下的文件，可通過(guò)plus.io Api，自己做選擇框。

官方提示到此為止~

AI求解

于是，開(kāi)始了漫長(zhǎng)的AI問(wèn)答……

deepseek、豆包、文心全問(wèn)一遍~（其實(shí)內(nèi)核是不是都deepseek??）

都”快速“給出答案代碼，然而”打包“測(cè)試已經(jīng)沒(méi)反應(yīng)；好一點(diǎn)的依舊只能選圖片~

舉一個(gè)栗子~

問(wèn)：Android端使用Native.js進(jìn)行選擇文件上傳

答：

1. 配置權(quán)限

在manifest.json文件中配置文件讀取權(quán)限：

{
    "plus": {
        "permission": {
            "readExternalStorage": {
                "desc": "讀取設(shè)備外部存儲(chǔ)空間的文件",
                "android": {
                    "name": "android.permission.READ_EXTERNAL_STORAGE"
                }
            }
        }
    }
}

2. 編寫(xiě)選擇文件的 Native.js 代碼

在頁(yè)面的<script>標(biāo)簽內(nèi)或單獨(dú)的 JS 文件中編寫(xiě)選擇文件的邏輯：

function pickFile(callback) {
    const Intent = plus.android.importClass('android.content.Intent');
    const intent = new Intent(Intent.ACTION_GET_CONTENT);
    intent.addCategory(Intent.CATEGORY_OPENABLE);
    // 設(shè)置選擇所有類(lèi)型文件
    intent.setType('*/*'); 

    plus.android.startActivityForResult(intent, function (intentData) {
        if (intentData) {
            const uri = intentData.getData();
            const ContentResolver = plus.android.importClass('android.content.ContentResolver');
            const cursor = plus.android.invoke(plus.android.runtimeMainActivity, 'getContentResolver')
              .query(uri, ['_data'], null, null, null);
            if (cursor.moveToFirst()) {
                const columnIndex = cursor.getColumnIndex('_data');
                const filePath = cursor.getString(columnIndex);
                cursor.close();
                callback(filePath);
            }
        }
    });
}

3. 編寫(xiě)上傳文件的代碼

結(jié)合uni.uploadFile方法來(lái)上傳選擇的文件：

<template>
    <view class="container">
        <button @click="pickAndUpload">選擇并上傳文件</button>
    </view>
</template>

<script>
export default {
    methods: {
        pickAndUpload() {
            pickFile((filePath) => {
                if (filePath) {
                    this.uploadFile(filePath);
                } else {
                    uni.showToast({
                        title: '未選擇文件',
                        icon: 'none'
                    });
                }
            });
        },
        uploadFile(filePath) {
            uni.uploadFile({
                url: 'https://your - server - url.com/api/upload', // 替換為實(shí)際的上傳接口地址
                filePath: filePath,
                name: 'file',
                success: function (res) {
                    console.log('文件上傳成功', res.data);
                    uni.showToast({
                        title: '文件上傳成功',
                        icon:'success'
                    });
                },
                fail: function (err) {
                    console.log('文件上傳失敗', err);
                    uni.showToast({
                        title: '文件上傳失敗',
                        icon: 'none'
                    });
                }
            });
        }
    }
};
</script>

<style scoped>
.container {
    padding: 20px;
}
</style>

很詳細(xì)~

然而只有一個(gè)問(wèn)題：不work！

o(╯□╰)o

正確答案

最后還在uniapp的論壇上找到了答案，已經(jīng)通過(guò)android app測(cè)試，可用~

使用原生的Native.js調(diào)用??平臺(tái)的文件管理器，選擇文件并向上傳文件的相關(guān)方法傳遞所選文件的正確路徑。

如果會(huì)安卓原生編程，代碼so easy。

// from DCloud
window.PickFile = function(callback,acceptType){  
    function ip(obj){  
        plus.android.importClass(obj);  
        return obj;  
    }  
    if(plus.os.name == 'Android' && typeof callback == 'function'){  
        var CODE_REQUEST = 1000;  
        var context = plus.android.runtimeMainActivity();  
        ip(context);  
        var Intent = plus.android.importClass('android.content.Intent');  
        var intent = new Intent(Intent.ACTION_GET_CONTENT);  
        intent.addCategory(Intent.CATEGORY_OPENABLE);  
        if(acceptType){  
            intent.setType(acceptType);  
        }else{  
            intent.setType("*/*");  
        }  
        context.onActivityResult = function(requestCode,resultCode,intentData){  
            if(requestCode == CODE_REQUEST){  
                if(intentData){  
                    var uriValue = intentData.getData();  
                    plus.android.importClass(uriValue);  
                    var scheme = uriValue.getScheme();  
                    if(scheme == 'content'){//還需要進(jìn)行數(shù)據(jù)庫(kù)查詢(xún)，一般圖片數(shù)據(jù)  
                        var cursor = ip(context.getContentResolver()).query(uriValue,['_data'], null, null, null);  
                        if(cursor){  
                            ip(cursor).moveToFirst();  
                            var columnIndex = cursor.getColumnIndex('_data');  
                            picturePath = cursor.getString(columnIndex);  
                            cursor.close();  
                            callback(picturePath);//返回文件路徑  
                        }  
                    }else if(scheme == 'file'){  
                        callback(uriValue.getPath());//返回文件路徑  
                    }  
                }else{  
                    callback(null);  
                }  
            }  
        }  
        context.startActivityForResult(intent,CODE_REQUEST);  
    }  
}

實(shí)現(xiàn)

為了h5還是先判斷下環(huán)境

const BaseInfo = uni.getAppBaseInfo();

BaseInfo.uniPlatform==="app”的話用，h5還是uni.chooseFile

function ip(obj){  
     plus.android.importClass(obj);  
     return obj;  
 }
uploadFileInit(){
	const CODE_REQUEST = 500;  
           let context = plus.android.runtimeMainActivity();  
          
           ip(context);  
	let Intent = plus.android.importClass('android.content.Intent');  
           let intent = new Intent(Intent.ACTION_GET_CONTENT);  
           intent.addCategory(Intent.CATEGORY_OPENABLE);  
           intent.setType("*/*");   

            context.onActivityResult = function(requestCode,resultCode,intentData){  
            
               if(requestCode == CODE_REQUEST){  
                   if(intentData){  
                      
                       var uriValue = intentData.getData();  
                       plus.android.importClass(uriValue);  
                       var scheme = uriValue.getScheme();  
                       
                       if(scheme == 'content'){//還需要進(jìn)行數(shù)據(jù)庫(kù)查詢(xún)，一般圖片數(shù)據(jù)  
                           var cursor = ip(context.getContentResolver()).query(uriValue,['_data'], null, null, null);  
                           if(cursor){  
                               ip(cursor).moveToFirst();  
                               var columnIndex = cursor.getColumnIndexOrThrow('_data');  
                               try{
                               var filePath = cursor.getString(columnIndex);  
                               _this.filePath = filePath;
                           
                               cursor.close();
                              //  _this.調(diào)用上傳接口的方法(filePath, ‘文件類(lèi)型');
                              }catch(e){
                               
                              }
                           }  
                       }else if(scheme == 'file'){  
                         
                         // 路徑 uriValue.getPath()
                       }  
                   }else{  
                     uni.showToast({
                       title: '選擇文件失敗',
                       icon: 'none'
                     });
                   }  
               }  
           }  
           context.startActivityForResult(intent,CODE_REQUEST);  
}

找了好久~真機(jī)測(cè)試可行~