uniapp附件上传及预览

uniapp 实现表单中包括上传附件

uniapp做的原生android开发，动态表单数据录入的时候有时候需要上传附件和拍照视频功能

1.进行android平台的判断

if (plus.os.name.toLowerCase() != "android") {uni.showModal({title: '提示',content: '仅支持Android平台',success: function(res) {}});return false
}

let main = plus.android.runtimeMainActivity();
let Intent = plus.android.importClass("android.content.Intent");
let fileIntent = new Intent(Intent.ACTION_GET_CONTENT)
fileIntent.setType("*/*"); //无类型限制
fileIntent.addCategory(Intent.CATEGORY_OPENABLE);
main.startActivityForResult(fileIntent, 1);
// 获取回调
main.onActivityResult = function(requestCode, resultCode, data) {let Activity = plus.android.importClass("android.app.Activity");
let ContentUris = plus.android.importClass("android.content.ContentUris");
let Cursor = plus.android.importClass("android.database.Cursor");
let Uri = plus.android.importClass("android.net.Uri");
let Build = plus.android.importClass("android.os.Build");
let Environment = plus.android.importClass("android.os.Environment");
let DocumentsContract = plus.android.importClass("android.provider.DocumentsContract");
let MediaStore = plus.android.importClass("android.provider.MediaStore");
let contentResolver = main.getContentResolver()
plus.android.importClass(contentResolver);
// 返回路径
let path = '';
if (resultCode == Activity.RESULT_OK) {let uri = data.getData()if ("file" == uri.getScheme().toLowerCase()) { //使用第三方应用打开path = uri.getPath();return;}if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT) { //4.4以后path = getPath(this, uri);} else { //4.4以下下系统调用方法path = getRealPathFromURI(uri)}// 回调let arr = path.split('/')let fileName = arr[arr.length - 1]that.files.push({path: path,name: fileName})
}
// 4.4 以上 从Uri 获取文件绝对路径
function getPath(context, uri) {let isKitKat = Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT;let scheme = uri.getScheme().toLowerCase()if (isKitKat && DocumentsContract.isDocumentUri(context, uri)) {/if (isExternalStorageDocument(uri)) {let docId = DocumentsContract.getDocumentId(uri);let split = docId.split(":");let type = split[0];// 如果是手机内部存储if ("primary" == type.toLowerCase()) {return Environment.getExternalStorageDirectory() + "/" + split[1];} else {return '/storage/' + type + "/" + split[1];}}// DownloadsProviderelse if (isDownloadsDocument(uri)) {let id = DocumentsContract.getDocumentId(uri);let split = id.split(":");return split[1]}// MediaProviderelse if (isMediaDocument(uri)) {let docId = DocumentsContract.getDocumentId(uri);let split = docId.split(":");let type = split[0];let contentUri = null;if ("image" == type.toLowerCase()) {contentUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;} else if ("video" == type.toLowerCase()) {contentUri = MediaStore.Video.Media.EXTERNAL_CONTENT_URI;} else if ("audio" == type.toLowerCase()) {contentUri = MediaStore.Audio.Media.EXTERNAL_CONTENT_URI;}let selection = "_id=?";let selectionArgs = [split[1]];return getDataColumn(context, contentUri, selection, selectionArgs);}}// MediaStore (and general)else if ("content" == scheme) {return getDataColumn(context, uri, null, null);}// Fileelse if ("file" == scheme) {return uri.getPath();}
}
// 4.4 以下 获取 绝对路径
function getRealPathFromURI(uri) {let res = nulllet proj = [MediaStore.Images.Media.DATA]let cursor = contentResolver.query(uri, proj, null, null, null);if (null != cursor && cursor.moveToFirst()) {let column_index = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);res = cursor.getString(column_index);cursor.close();}return res;
}// 通过uri 查找出绝对路径
function getDataColumn(context, uri, selection, selectionArgs) {let cursor = null;let column = "_data";let projection = [column];cursor = contentResolver.query(uri, projection, selection, selectionArgs, null);if (cursor != null && cursor.moveToFirst()) {let column_index = cursor.getColumnIndexOrThrow(column);return cursor.getString(column_index);}
}function isExternalStorageDocument(uri) {return "com.android.externalstorage.documents" == uri.getAuthority() ? true : false
}function isDownloadsDocument(uri) {return "com.android.providers.downloads.documents" == uri.getAuthority() ? true : false
}
function isMediaDocument(uri) {return "com.android.providers.media.documents" == uri.getAuthority() ? true : false
}

转化base64

handControllGetBase64(file, callback) {//h5不可用
uni.saveFile({tempFilePath: file,success: (saveFile) => {//pathToBase64为uniapp 插件市场的插件内方法pathToBase64(saveFile.savedFilePath).then(base64 => {//用完就删uni.removeSavedFile({filePath: saveFile.savedFilePath});//返回callback(base64);})},fail: (err) => {console.log(err)}
});
},

附件的预览

// 附件预览
previewFile(obj) {let that = thislet path = ''if (obj.path) {uni.openDocument({filePath: obj.path,success(res) {},fail(res) {uni.showToast({title: '无法打开的文件类型'})}})} else {let path = ''let url = ‘xxx’uni.downloadFile({url: url,header: {'Content-Type': 'application/json','Accept': 'application/json','charset': 'UTF-8'},success: function(res) {if (res.statusCode == 200) {path = res.tempFilePath;uni.openDocument({filePath: path,success(res) {},fail(res) {uni.showToast({title: '无法打开的文件类型',icon: 'none'})}})} else {uni.showToast({title: '下载附件失败',icon: 'none'})}}})}
},

uniapp附件上传及预览相关推荐

微信小程序基于vant和springboot实现附件上传和预览
前言图片上传和预览在移动端应用非常广泛和频繁,vant组件库van-uploader组件已经帮我们实现了大部分功能,但是在系统中频繁使用还是有点麻烦,我们根据自身的业务系统重新封装了一下简化我们的开 ...
layui 附件上传、预览、删除、下载
layui在开发文档中提供了附件上传的方法upload.render(),此篇文章在此模块基础方法上扩展补充了附件预览.删除.下载的实现方法.具体如下: layui 文件/图片上传 layui 相册 ...
解决uniapp小程序打包体积超过2M，提示包体积超过2M，“main packagexxx”,不给上传和预览的解决办法，绝对有效
解决办法,原文地址: 解决uniapp小程序打包体积超过2M,提示包体积超过2M,"main packagexxx",不给上传和预览的解决办法,绝对有效!在微信小程序开发中,为了解 ...
uni-app知识点整理（5）- 网络请求、数据缓存、图片上传和预览
目录一.网络请求 1.1 发送get请求二.数据缓存 2.1 uni.setStorage(OBJECT) 2.2 uni.setStorageSync(KEY,DATA) 2.3 uni.get ...
php+jquery实现图片上传预览_和拖动位置值,PHP教程：thinkphp jquery实现图片上传和预览效果...
<PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...
php 表格导入excel插件,BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤...
这篇文章主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传.预览.提交的导入Excel数据操作步骤,需要的朋友可以参考下 bootstrap ...
js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html><head>< ...
alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）
1.控件功能列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http:// ...

uniapp附件上传及预览

uniapp 实现表单中包括上传附件

uniapp附件上传及预览相关推荐

最新文章

热门文章