1uniAPP中拿到附件的base64如何操作,如word文件

/**
* 实现思路:
* 通过native.js的io操作创建文件,拿到平台绝对路径
* 再通过原生类进行base64解码,拿到字节流bytes数组需注意官方的android.util.Base64的 Base64.decode(base64Str,0)有大小限制;目前解决方案写了个原生插件Helper
* 在通过java类FileOutputStream进行文件写入bytes返回文件路径path
* 在通过plus.runtime.openFile(path);用第三方程序打开文件
* */

第一步:解决android.util.Base64的 Base64.decode(base64Str,0)有大小限制

引入原生插件Helper插件在附件里https://pan.baidu.com/s/1hXhdSWXdZStYjAbgMzvFfw 提取码 加我qq 1392293229

// 文件操作
const Helper = uni.requireNativePlugin('Helper')

第二步:封装文件写入操作lzFileWriter函数

//文件的写入操作传入要写入文件名,base64
function lzFileWriter(base64,fileName) {
return new Promise((result,reject)=>{
// PRIVATE_WWW:本地文件系统常量,Number类型,固定值1。应用运行资源目录,仅本应用可访问。 为了确保应用资源的安全性,此目录只可读。
// PRIVATE_DOC 本地文件系统常量,Number类型,固定值2。应用私有文档目录,仅本应用可读写。
plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
/*
fs.root是根目录操作对象DirectoryEntry
getFile(path,flag,succesCB,errorCB)创建或打开文件
path: ( DOMString ) 必选 要操作文件相对于当前目录的地址
flag: ( Flags ) 可选 要操作文件或目录的参数 create: (Boolean 类型 )是否创建对象标记 指示如果文件或目录不存在时是否进行创建,默认值为false
succesCB: ( EntrySuccessCallback ) 可选 创建或打开文件成功的回调函数
errorCB: ( FileErrorCallback ) 可选 创建或打开文件失败的回调函数
*/
// 创建或打开文件
fs.root.getFile(fileName,{create:true},function(fileEntry) {
// 获得平台绝对路径
var fullPath = fileEntry.fullPath;
console.log('平台绝对路径',fullPath);
// 引入安卓原生类
// var Base64 = plus.android.importClass("android.util.Base64");
var FileOutputStream = plus.android.importClass("java.io.FileOutputStream");
//如果文件不存在则创建文件,如果文件存在则删除文件后重新创建文件
var out = new FileOutputStream(fullPath);
/**
* 此处需要把base64前缀去除,解码后,在写入字节流数组
* 去除头部如data:image/jpg;base64,留下base64编码后的字符串
**/
let index=base64.indexOf(',')
let base64Str=base64.slice(index+1,base64.length)
//base64编码的字符串获取bytes字节流,此bytes为编码的
let bytes = Helper.Str2Bytes(base64Str,'utf-8').data;
/**
* bytes再去解密,得到原始的字节流bytes
* 由于使用njs的android.util.Base64的var bytes = Base64.decode(base64Str,0);解码有大小限制,只能写原始插件Helper
**/
bytes=Helper.Base64Decode(bytes,0).data;
/**
* base64解密得到字节流bytes;但是njs有大小限制,解码不能超过100kb具体与手机系统版本有关
* Base64.decode(base64Str,0);此方法相当于上面的操作
* 【let bytes = Helper.Str2Bytes(base64Str,'utf-8').data; bytes=Helper.Base64Decode(bytes,0).data;】
**/
// var bytes = Base64.decode(base64Str,0);//有大小限制已舍弃此方法
try{
out.write(bytes); // byte 数组写入此文件输出流中。
out.flush(); //刷新写入文件中去。
out.close(); //关闭此文件输出流并释放与此流有关的所有系统资源。
result(fullPath)
}catch(e){
console.log(e.message);
reject(e.message)
}
// 下面的方法只能写入字符串,无法写入字节流bytes
// fileEntry文件系统中的文件对象,用于管理特定的本地文件
// fileEntry.file(function(file) {
// /*createWriter获取文件关联的写文件操作对象FileWriter
// abort: 终止文件写入操作
// seek: 定位文件操作位置
// truncate: 按照指定长度截断文件
// write: 向文件中写入数据
// */
// fileEntry.createWriter(function(FileWriter) {
// FileWriter.write(base64);
// FileWriter.onwriteend=function(res){
// console.log(res.target.fileName);
// result(res.target.fileName)
// }
// FileWriter.onerror=function(error){
// console.log(error);
// reject(error)
// }
// }, function(e) {
// console.log(e);
// });
// });
});
});
})
}

第三步调用封装的lzFileWriter

/**
* 实现思路:
* 通过native.js的io操作创建文件,拿到平台绝对路径
* 再通过原生类进行base64解码,拿到字节流bytes数组
* 在通过java类FileOutputStream进行文件写入bytes返回文件路径path
* 在通过plus.runtime.openFile(path);用第三方程序打开文件
* */
// 写入字节输出流
let path=await that.$lizhao.lzfile.lzFileWriter(base64,'lizhao222.doc')
console.log(path);
plus.runtime.openFile(path);

2.拿到视频,音频,图片的base64如何操作?

/**
* 实现思路:
* 视频和音频拿到base64,可通过h5方式将base64转成blob对象
* 再通过URL.createObjectURL(blob)生成指向File对象或Blob对象的URL,
* 此url可以放到大部分标签下的src中进行渲染,如img,video,audio
* */

第一步:新建一个vue页面传入base64,创建webview

create(){
let that=this
var currentWebview = this.$scope.$getAppWebview()
//创建Webview窗口,用于加载新的HTML页面,可通过styles设置Webview窗口的样式,创建完成后需要调用show方法才能将Webview窗口显示出来。
let wv = plus.webview.create("/hybrid/html/pages/filePlay.html","/hybrid/html/pages/filePlay.html",{
'uni-app': 'none', //不加载uni-app渲染层框架,避免样式冲突
top: 0,
height: '100%',
background: 'transparent'
},{
base64:that.base64,//传参
type:that.type//文件类型
});
// 在Webview窗口中添加子窗口// ${that}.bbb(objecturl)
currentWebview.append(wv);
},

第二步:在filePlay.html中拿到base64

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>文件播放系统</title>
<style type="text/css">
html,
body {
padding: 0;
margin: 0;
} #App {
background: transparent;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
} #App .video {
width: 100%;
height: 100%;
} #App .audio {
margin: auto;
}
</style>
</head>
<body>
<div id="App">
<video :src="videoSrc" autoplay v-if="videoSrc" controls class="video"></video>
<!-- <img :src="imgSrc" v-if="imgSrc"/> -->
<audio id="myAudio" controls v-if="audioSrc" class="audio">
<source :src="audioSrc" type="audio/ogg">
<source :src="audioSrc" type="audio/mpeg">
暂不支持播放此类型
</audio>
<iframe :src='wordSrc' width='100%' height='100%' frameborder='1' v-if="wordSrc"></iframe>
</div>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/global.js"></script>
<script type="text/javascript" src="../js/file-saver/dist/FileSaver.js"></script>
<!-- <script type="text/javascript" src="../js/wps/web-office-sdk-v1.1.2.umd.js"></script> -->
<script type="text/javascript">
// import { saveAs } from '../js/file-saver/dist/FileSaver.js';
document.addEventListener('UniAppJSBridgeReady', function() {
let that
//webview传参到html5网页
let {
base64,
type
} = plus.webview.currentWebview();
console.log(base64.slice(0, 50));
new Vue({
el: '#App',
data: {
videoSrc: '',
imgSrc: '',
audioSrc: '',
wordSrc: '',
aHref: ""
},
async mounted() {
that = this
let blob = that.dataURLtoBlob(base64)
/**
* URL对象用于生成指向File对象或Blob对象的URL。
* 这个URL可以放置于任何通常可以放置URL的地方,比如img标签的src属性
**/
var blobUrl = URL.createObjectURL(blob);
console.log(blobUrl);
console.log(type);
if (type == 'video') {
that.videoSrc = blobUrl
} else if (type == 'audio') {
that.audioSrc = blobUrl
} else if (type == 'word') {
}
// 在每次调用createObjectURL()方法时,都会创建一个新的URL对象,即使你已经用相同的对象作为参数创建过。当不再需要这些URL对象时,每个对象必须通过调用URL.revokeObjectURL()方法来释放
setTimeout(() => {
window.URL.revokeObjectURL(objecturl); //释放createObjectURL创建得对象
}, 2000) },
methods: {
//base64转成blob对象第一种方式
dataURLtoBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);//8位无符号整数,长度1个字节
console.log(mime)
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
// console.log(JSON.stringify(u8arr));
return new Blob([u8arr], {
type: mime
});
}, }
})
});
</script>
</body>
</html>

  

uniapp中拿到base64转blob对象,或base64转bytes字节数组,io操作写入字节流文件bytes的更多相关文章

  1. JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

  2. Python中的文件IO操作(读写文件、追加文件)

    Python中文件的读写包含三个步骤:打开文件,读/写文件,关闭文件. 文件打开之后必须关闭,因为在磁盘上读写文件的功能是由操作系统提供的,文件作为对象,被打开后会占用操作系统的资源,而操作系统在同一 ...

  3. 简述ADO中如何使用参数化的命令对象以及增删改查,存储过程的操作

    连接数据库代码: private SqlConnection con = null; public void OpenConnection(string connectionString) { con ...

  4. delphi中如何将string类型的字符串数据转化成byte[]字节数组类型的数据

    var  S:String;  P:PChar;  B:array of Byte;begin  S:='Hello';  SetLength(B,Length(S)+1);  P:=PChar(S) ...

  5. MP4视频流base64数据转成Blob对象

    网上一大堆对图片base64转Blob.File的方法 很少有视频mp4转的,可能是因为原理相同的原因吧!但在项目中针对视频流base64转Blob对象时,花了好长时间才成功,特专门记录一下! APP ...

  6. 『现学现忘』Git对象 — 15、blob对象介绍

    目录 (一)Git对象的存放目录 (二)Git中对象类型 (三)blob对象 1.blob对象说明 (1)blob对象定义 (2)blob对象说明 (3)blob对象存储的方式 (4)查看blob对象 ...

  7. 6.5(java学习笔记)其他流(字节数组流,数据流,对象流,打印流)

    一.字节数组流 之前使用输入输出流的操作的对象是文件,而这里字节数组流操作的对象是内存,内存可以看做是一个字节数组. 使用字节数组流读写就可以看做是从内存A到内存B的读写,对象时内存即字节数组. 1. ...

  8. python文件对象几种操作模式区别——文件操作方法详解

    文件对象的字节模式/b模式(以utf-8编码为例) 读操作 写操作 指针操作 ASCII字节 返回bytes/字节类型的Ascii 写入bytes类型字节 例如:b'This is ascii' 使用 ...

  9. [.Net,C#]三类资源:流对象Stream,字节数组byte[],图片Image

    三类资源:流对象Stream,字节数组byte[],图片Image 关系:Stream<=>byte[],byte[]<=>Image Stream 与Image相互转化的媒介 ...

随机推荐

  1. Linux基础命令---sendmail发送邮件

    sendmail sendmail是postfix中的一个发送邮件的代理程序,它负责发送邮件到远程服务器,并且可以接收邮件.sendmail在发送邮件的时候,默认从标砖输入读取内容,以".& ...

  2. vue项目windows环境初始化

    下载nodejs zip包并加载到环境变量 nodejs的版本最好使用12版,而不是最新版 npm install webpack -gnpm install -g yarnyarn config s ...

  3. Mysql的索引调优详解:如何去创建索引以及避免索引失效

    在正式介绍Mysql调优之前,先补充mysql的两种引擎 mysql逻辑分层 InnoDB:事务优先(适合高并发操作,行锁) MyISAM:性能优先(表锁) 查看使用的引擎: show variabl ...

  4. 【编程思想】【设计模式】【行为模式Behavioral】访问者模式Visitor

    Python版 https://github.com/faif/python-patterns/blob/master/behavioral/visitor.py #!/usr/bin/env pyt ...

  5. 【Linux】【Shell】【text】Vim

    文本编辑器: 文本:纯文本,ASCII text:Unicode: 文本编辑种类: 行编辑器:sed 全屏编辑器:nano, vi vi: Visual Interface vim: Vi IMpro ...

  6. “==” 和 equals()的区别

    ※ "==" 和 equals()的区别 ※ == :比较. 基本数据类型比较的是值:. 引用类型比较的是地址值. ※ equals(Object o):1)不能比较基本数据类型, ...

  7. 你的Redis怎么持久化的

    一.持久化套路 OK,一般我们在生产上采用的持久化策略为 (1)master关闭持久化 (2)slave开RDB即可,必要的时候AOF和RDB都开启 该策略能够适应绝大部分场景,绝大部分集群架构. 为 ...

  8. UIWindow介绍

    1.作为容器,包含app所要显示的所有视图 3.与UIViewController协同工作,方便完成设备方向旋转的支持 1.addSubview 2.rootViewController 三.Wind ...

  9. JS如何区分微信浏览器、QQ浏览器和QQ内置浏览器,解决 ios 无法判断是否为qq浏览器环境的问题 !!!

    原理 通过不同移动端的ua弹窗 获取user-agent 参数包含的信息,进行判断浏览器类型 在Android上 QQ内置环境的ua中有关键字 MQQBrowser, 并且后面包含一个[空白符+QQ] ...

  10. heap exploit about ptmalloc in glibc version 2.31

    学习的一下高版本的libc的利用方式. 项目地址:https://github.com/StarCross-Tech/heap_exploit_2.31 tcache_dup 源代码: 1 #incl ...