uniapp上传文件功能

uniapp上传文件功能

## 新建文件@/utils/uploadFile.js;在文件中暴露出chooseFile方法。
export function chooseFile(callback, acceptType = "application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", name = "1", index = 3) {
    var CODE_REQUEST = 1000;
    var main = plus.android.runtimeMainActivity();
    if (plus.os.name == 'Android') {
        console.log("666");
        var Intent = plus.android.importClass('android.content.Intent');
        var intent = new Intent(Intent.ACTION_GET_CONTENT);
        intent.addCategory(Intent.CATEGORY_OPENABLE);
 
        // Set acceptType to allow pdf, doc, and docx files
        if (acceptType) {
            intent.setType(acceptType);
            intent.putExtra(Intent.EXTRA_MIME_TYPES, acceptType.split(","));
        } else {
            intent.setType("*/*");
        }
 
        main.onActivityResult = (requestCode, resultCode, data) => {
            if (requestCode == CODE_REQUEST && resultCode == main.RESULT_OK) {
                const uri = data.getData();
                plus.android.importClass(uri);
                const Build = plus.android.importClass('android.os.Build');
                const isKitKat = Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT;
                const DocumentsContract = plus.android.importClass('android.provider.DocumentsContract');
 
                let filePath = null;
 
                if (isKitKat && DocumentsContract.isDocumentUri(main, uri)) {
                    if ("com.android.externalstorage.documents" == uri.getAuthority()) {
                        var docId = DocumentsContract.getDocumentId(uri);
                        var split = docId.split(":");
                        var type = split[0];
 
                        if ("primary" == type) {
                            var Environment = plus.android.importClass('android.os.Environment');
                            filePath = Environment.getExternalStorageDirectory() + "/" + split[1];
                        } else {
                            var System = plus.android.importClass('java.lang.System');
                            var sdPath = System.getenv("SECONDARY_STORAGE");
                            if (sdPath) {
                                filePath = sdPath + "/" + split[1];
                            }
                        }
                    } else if ("com.android.providers.downloads.documents" == uri.getAuthority()) {
                        var id = DocumentsContract.getDocumentId(uri);
                        var ContentUris = plus.android.importClass('android.content.ContentUris');
                        var contentUri = ContentUris.withAppendedId(
                            Uri.parse("content://downloads/public_downloads"), id);
                        filePath = getDataColumn(main, contentUri, null, null);
                    } else if ("com.android.providers.media.documents" == uri.getAuthority()) {
                        var docId = DocumentsContract.getDocumentId(uri);
                        var split = docId.split(":");
                        var type = split[0];
                        var MediaStore = plus.android.importClass('android.provider.MediaStore');
 
                        if ("image" == type) {
                            contentUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
                        } else if ("video" == type) {
                            contentUri = MediaStore.Video.Media.EXTERNAL_CONTENT_URI;
                        } else if ("audio" == type) {
                            contentUri = MediaStore.Audio.Media.EXTERNAL_CONTENT_URI;
                        } else {
                            contentUri = MediaStore.Files.getContentUri("external");
                        }
 
                        var selection = "_id=?";
                        var selectionArgs = new Array();
                        selectionArgs[0] = split[1];
 
                        filePath = getDataColumn(main, contentUri, selection, selectionArgs);
                    }
                } else if ("content" == uri.getScheme()) {
                    filePath = getDataColumn(main, uri, null, null);
                } else if ("file" == uri.getScheme()) {
                    filePath = uri.getPath();
                }
 
                // Ensure file is either PDF, DOC, or DOCX before proceeding
                if (filePath && (filePath.toLowerCase().endsWith('.pdf') || filePath.toLowerCase().endsWith('.doc') || filePath.toLowerCase().endsWith('.docx'))) {
                    const fileSize = getFileSize(filePath); // Function to get file size
                    const fileUrl = "file://" + filePath;
 
                    const result = {
                        "file": [
                            {
                                "size": fileSize,
                                "type": "application/" + (filePath.endsWith(".pdf") ? "pdf" : (filePath.endsWith(".doc") ? "msword" : "vnd.openxmlformats-officedocument.wordprocessingml.document")),
                                "url": fileUrl,
                                "thumb": filePath // Assuming thumb is the same as URL
                            }
                        ],
                        "name": name,
                        "index": index
                    };
                    callback({ code: 200, msg: "success", data: result });
                } else {
                    callback({ msg: "Selected file is not a valid PDF, DOC, or DOCX file.", code: 500 });
                    console.error("Selected file is not a valid PDF, DOC, or DOCX file.");
                }
            }
        };
        main.startActivityForResult(intent, CODE_REQUEST);
    }
}
 
function getDataColumn(main, uri, selection, selectionArgs) {
    plus.android.importClass(main.getContentResolver());
    let cursor = main.getContentResolver().query(uri, ['_data'], selection, selectionArgs, null);
    plus.android.importClass(cursor);
    if (cursor != null && cursor.moveToFirst()) {
        var column_index = cursor.getColumnIndexOrThrow('_data');
        var result = cursor.getString(column_index);
        cursor.close();
        return result;
    }
    return null;
}
 
function getFileSize(filePath) {
    var File = plus.android.importClass('java.io.File');
    var file = new File(filePath);
    return file.length(); // Returns the size in bytes
}
 
export default chooseFile;

引入

import { chooseFile } from '@/util/uploadFile.js'

点击事件

// 【上传文件】按钮点击方法
goUpload(){
chooseFile((path) => {
if (path.code == 200) {
let params = {
type: 0,
file: path.data.file[0] //文件二进制
}

					 uni.uploadFile({
					 	url: this.uploadAction, // 这是你自己的上传接口
					 	filePath: path.data.file[0].url, // 将选择的文件url传入
					 	fileType: "file", // 文件类型:file
					 	name: 'file',
					 	formData: {},
					 	header: {
					 		"Authorization": uni.getStorageSync("token"),
					 	},
					 	success: res => {
					 		console.log(res,'成功上传,获取文件id');
					 	}
					 })
		           } else {
		               uni.showToast({
		                   title: '文件只支持doc,docx,pdf格式',
		                   icon: 'none',
		                   duration: 2000
		               });
		           }
		       })
	   },
### 如何在 UniApp 中实现文件上传 #### 使用 `uni-file-picker` 组件实现文件上传 为了实现在 UniApp 小程序中上传文件功能,可以利用内置的 `uni-file-picker` 组件来选择本地文件并将其发送至服务器。此组件允许开发者指定可选文件类型以及设定其他参数如最大尺寸等。 下面是一个具体的例子展示了怎样配置这个组件来进行图片和其他类型的文件上传: ```html <template> <view class="content"> <!-- 文件选择器 --> <uni-file-picker v-model="fileList" fileMediatype="all" mode="grid" limit="9" @select="onSelect" @progress="onProgress" @success="onSuccess" @fail="onFail"/> <!-- 提交按钮 --> <button type="primary" @click="uploadFiles">提交</button> </view> </template> <script> export default { data() { return { fileList: [] }; }, methods: { async uploadFiles() { const result = await uniCloud.uploadFile({ filePath: this.fileList[0].url, cloudPath: 'example/' + new Date().getTime() + '.jpg' }); console.log('Upload Result:', result); }, onSelect(e) {console.log('Selected Files:', e)}, onProgress(e){console.log('Uploading Progress:', e)}, onSuccess(e) {console.log('Upload Success:', e)}, onFail(e) {console.error('Upload Failed:', e)} } }; </script> ``` 上述代码片段定义了一个简单的页面布局,其中包含一个用于挑选文件的选择框和一个触发实际上传过程的按钮[^3]。 当用户选择了想要上传的一个或多个文件之后,这些文件的信息会被存储在 `data()` 函数返回的对象内的 `fileList` 属性下;而一旦按下“提交”键,则会调用 `uploadFiles()` 方法执行真正的上传操作,并通过 `uniCloud.uploadFile()` API 接口将选定的第一个文件传送到云端存储位置[^4]。 此外还提供了几个回调方法 (`onSelect`, `onProgress`, `onSuccess`, 和 `onFail`) 来处理不同阶段发生的事件,比如显示进度条或者报告错误信息给前端界面以便于用户体验优化。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值