ARTICLE DETAIL

资讯详情

深耕编程入门与网站建设的一线实战洞察。

UNI-APP(Android)选择文件上传、下载文件

UNI-APP(Android)选择文件上传、下载文件 template view classcontent view classserver-address view classtitle上传地址:/view input classuni-input v-modelserverAddress inputonKeyInput placeholder请输入上传地址 / /view view classupload-file button sizedefault typedefault clickchooseFile选择CSV文件/button text当前选中的文件{{ selectedFile }}/text button sizedefault typeprimary clickuploadFile :disabled!selectedFile :loadingbuttonLoading上传文件/button /view /view /template script export default { data() { return { // 上传地址 serverAddress: http://10.10.10.99:8094, selectedFile: , // 选中的文件 filePath: , // 存储文件路径 buttonLoading: false, } }, mounted() { // 初始化上传地址 const serverAddress uni.getStorageSync(upload-ip); if (serverAddress) { this.serverAddress serverAddress; } }, methods: { onKeyInput(input) { const val input.detail.value; uni.setStorageSync(upload-ip, val); }, // 请求权限 requestAuth(callback) { const permissions [android.permission.READ_EXTERNAL_STORAGE, android.permission.WRITE_EXTERNAL_STORAGE]; plus.android.requestPermissions(permissions, (resultObj) { if(resultObj.granted.length 0) { callback callback(); } else { uni.showToast({ title: 请授权读取外部存储权限, icon: none }); } }); }, // 选择文件 // 推荐插件https://ext.dcloud.net.cn/plugin?id24775 chooseFile() { // plus.io.chooseFile({ // title: x, // multiple: false, // }, (res) { // console.error(res); // }) const that this; that.requestAuth((){ const Intent plus.android.importClass(android.content.Intent); const intent new Intent(Intent.ACTION_GET_CONTENT); intent.addCategory(Intent.CATEGORY_OPENABLE); // 只选择CSV文件 intent.setType(*/*); // 设置为所有文件类型 intent.putExtra(Intent.EXTRA_MIME_TYPES, [text/csv, text/comma-separated-values]); // 限制CSV类型 const main plus.android.runtimeMainActivity(); main.startActivityForResult(intent, 1); main.onActivityResult (requestCode, resultCode, data) { if (requestCode 1 resultCode main.RESULT_OK) { const uriStr decodeURIComponent(data.getData().toString()); const fileName uriStr.split(/).pop(); if (!fileName.endsWith(.csv)) { uni.showToast({ title: 文件名:${fileName},请选择CSV文件, icon: none, duration: 3000 }); return; } that.selectedFile fileName; const { osVersion } uni.getSystemInfoSync(), version parseFloat(osVersion); // 低版本安卓文件路径不能乱码 that.filePath version 11 ? data.getData().toString() : uriStr; } }; }); }, // 上传文件 uploadFile() { const that this; that.buttonLoading true; uni.uploadFile({ url: ${that.serverAddress}/api/v3/report-center/point/import-points-csv, filePath: that.filePath, name: file, // 后端接收的文件参数名 success: (res) { that.buttonLoading false; // 取消加载 const resData JSON.parse(res.data); if (resData.code 00) { uni.showToast({ title: 上传成功, icon: success }); that.selectedFile ; // 清空选中的文件 that.filePath ; // 清空文件路径 return; } uni.showToast({ title: resData.message || 上传失败, icon: none, duration: 3000 }); }, fail: (err) { that.buttonLoading false; // 取消加载 console.error(文件上传失败, err); uni.showToast({ title: 上传失败, icon: error }); } }); } } } /script style .content { height: 100vh; display: flex; gap: 5px; padding: 44px 10px 0px; box-sizing: border-box; flex-direction: column; align-items: center; justify-content: center; } .content .server-address { width: 100%; } .content .server-address .uni-input { border: 1px solid #ccc; border-radius: 5px; padding: 5px; margin-bottom: 10px; } .content .upload-file { display: flex; flex-direction: column; gap: 7px; } /style下载文件参考https://blog.csdn.net/Everglow___/article/details/137785678https://blog.csdn.net/zhangrongrong_zrr/article/details/144442450/** * 下载文件 * param url 下载地址 * param method 请求方法默认GET * param data 请求参数 JSON * param filename 文件名 * returns 下载路径 */ export function downloadFile({url, method GET, data {}, filename }: {url: string, method: GET | POST, data: any, filename: string}) { return new Promise((resolve, reject){ if (!_otherStore) { _otherStore useOtherStore(); } const arr [android.permission.WRITE_EXTERNAL_STORAGE, android.permission.READ_EXTERNAL_STORAGE] // 请求权限 requestPermissions(arr, (){ if (Object.keys(data).length 0) { url ? Object.keys(data).map(key ${key}${data[key]}).join(); } const baseDir getAndroidDownloadDir(); const fullPath file://${baseDir}/${filename}; const dtask plus.downloader.createDownload(${_otherStore!.BASE_URL}${url}, { method, filename: fullPath, timeout: 20,//单位(s) retry: 1, data: data,// POST请求时传递的body参数, 后端只能用String接收, 很奇葩 }, (res, status) { // 这里只能判断http状态码, res中获取不到自定义状态码 if (status 200) { const savedPath plus.io.convertLocalFileSystemURL(res.filename); uni.showToast({ title: 下载成功, 位置: ${savedPath}, icon: none, duration: 4000 }); resolve(savedPath); return; } plus.downloader.clear(); uni.showToast({ title: 下载失败状态码: ${status}, icon: none }); reject(下载失败状态码: ${status}); } ); dtask.start(); }); }); } // 请求权限 export function requestPermissions(arr: string[], callback (){}) { // #ifdef APP-PLUS plus.android.requestPermissions(arr, (resultObj) { if(resultObj.granted.length 0) { callback callback(); } }); // #endif // #ifndef APP-PLUS console.error(非APP-PLUS环境, 不支持请求权限); // #endif } /** * 获取 Android 公共下载目录的绝对路径 */ function getAndroidDownloadDir(): string { // #ifdef APP-PLUS if (uni.getSystemInfoSync().platform android) { try { const Environment plus.android.importClass(android.os.Environment); const context plus.android.runtimeMainActivity(); // 获取公共下载目录 File 对象 const downloadDir Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS); if (downloadDir) { return downloadDir.getAbsolutePath(); } } catch (e) { console.error(获取Android下载目录失败, e); } return /storage/emulated/0/Download; } // #endif return ; }
返回列表