javascript - 已经把语音转成base64，但是怎么获取这个base64上传到服务器上，参数是files
本文介绍了javascript - 已经把语音转成base64，但是怎么获取这个base64上传到服务器上，参数是files的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
已经把语音转成base64，但是怎么获取这个base64上传到服务器上，参数是files
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/audio.css" />
<style type="text/css">
.fiexed-buttom {
position: fixed;
bottom: 30px;
left: 15px;
right: 15px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">录音</h1>
</header>
<div class="mui-content">
<div class="fiexed-buttom">
<button id="recorder" type="button" class="mui-btn mui-btn-blue mui-btn-block">录制语音文件转base64字符串</button>
<button id="player" type="button" class="mui-btn mui-btn-blue mui-btn-block">base64字符串转成语音文件播放</button>
</div>
</div>
<div id='sound-alert' class="rprogress">
<div class="rschedule"></div>
<div class="r-sigh">!</div>
<div id="audio-tips" class="rsalert">手指上滑，取消发送</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init({
gestureConfig: {
tap: true, //默认为true
drag: true, //默认为true
hold: true, //默认为false，不监听
release: true //默认为false，不监听
}
});
var MIN_SOUND_TIME = 800;
var recorder = null;
var startTimestamp = null;
var stopTimestamp = null;
var stopTimer = null;
var recordCancel = false;
var files = [];
var soundAlert = document.getElementById("sound-alert");
var audioTips = document.getElementById("audio-tips");
// 控制录音弹出框是否播放
var setSoundAlertVisable = function(show) {
if(show) {
soundAlert.style.display = 'block';
soundAlert.style.opacity = 1;
} else {
soundAlert.style.opacity = 0;
// 完成再真正隐藏
setTimeout(function() {
soundAlert.style.display = 'none';
}, 200);
}
};
mui.plusReady(function() {
/**
* 录制语音文件转base64字符串
*/
// 按住录音（长按开始录音）
document.querySelector('#recorder').addEventListener('hold', function() {
recordCancel = false;
if(stopTimer) clearTimeout(stopTimer);
audioTips.innerHTML = "手指上划，取消发送";
soundAlert.classList.remove('rprogress-sigh');
setSoundAlertVisable(true);
// 获取当前设备的录音对象
recorder = plus.audio.getRecorder();
startTimestamp = (new Date()).getTime();
console.log("supportedFormats:" + JSON.stringify(recorder.supportedFormats));
recorder.record({
format: "amr",
filename: "_doc/audio/"
}, function(path) {
if(recordCancel) return;
console.log("path:" + path);
Audio2dataURL(path);
}, function(e) {
mui.toast("录音出现异常: " + e.message);
});
})
// 释放保存（松手保存）
document.querySelector('#recorder').addEventListener('release', function() {
if(audioTips.classList.contains("cancel")) {
audioTips.classList.remove("cancel");
audioTips.innerHTML = "手指上划，取消发送";
}
// 判断录音时间
stopTimestamp = (new Date()).getTime();
if(stopTimestamp - startTimestamp < 800) {
audioTips.innerHTML = "录音时间太短";
soundAlert.classList.add('rprogress-sigh');
recordCancel = true;
stopTimer = setTimeout(function() {
setSoundAlertVisable(false);
}, 800);
} else {
setSoundAlertVisable(false);
}
if(stopTimestamp - startTimestamp > 10000) { //10秒（待添加到限定时间自动结束）
audioTips.innerHTML = "录音时间结束";
soundAlert.classList.add('rprogress-sigh');
recordCancel = true;
stopTimer = setTimeout(function() {
setSoundAlertVisable(false);
}, 800);
} else {
setSoundAlertVisable(false);
}
recorder.stop();
})
// 拖动屏幕（手指上划，取消发送）
document.body.addEventListener('drag', function(event) {
if(Math.abs(event.detail.deltaY) > 50) {
if(!recordCancel) {
recordCancel = true;
if(!audioTips.classList.contains("cancel")) {
audioTips.classList.add("cancel");
}
audioTips.innerHTML = "松开手指，取消发送";
}
} else {
if(recordCancel) {
recordCancel = false;
if(audioTips.classList.contains("cancel")) {
audioTips.classList.remove("cancel");
}
audioTips.innerHTML = "手指上划，取消发送";
}
}
}, false);
/**
* 录音语音文件转base64字符串
* @param {Object} path
*/
function Audio2dataURL(path) {
plus.io.resolveLocalFileSystemURL(path, function(entry) {
entry.file(function(file) {
var reader = new plus.io.FileReader();
reader.onloadend = function(e) {
console.log(e.target.result);
alert(e.target.result)
};
reader.readAsDataURL(file);
}, function(e) {
mui.toast("读写出现异常: " + e.message);
})
})
}
/**
* base64字符串转成语音文件播放
*/
document.querySelector('#player').addEventListener('tap', function(e) {
// 语音文件dataURI
// var base64Str = 'data:audio/amr;base64,IyFBTVIKPJEXFr5meeHgAeev8AAAAIAAAAAAAAAAAAAAAAAAAAA8SHcklmZ54eAB57rwAAAAwAAAAAAAAAAAAAAAAAAAADxVAIi2Znnh4AHnz/AAAACAAAAAAAAAAAAAAAAAAAAAPEj5H5ZmeeHgAeeK8AAAAMAAAAAAAAAAAAAAAAAAAAA8CPlmkh3hIXBB58qREQnBLS2AJiaa8Vqa7gILj8G3gDxCdymROQIAABfzq88RwMhLefLr3vK3U6azfvq2nmHAPD72h50rSBEAHi+aAMR3ptW1FgXQIAf3RyrTkKRbVNA8RG5xjrpQA2Af58rpoypM11/kORggGJI0bKkO9aI3wDxEclqNTNoAgFMuupawKhLxonjKARrlXizd3p380vlAPEJoZ0PvUAFgHvfaQQNN2t5xEFKHP1urAHfDDXmGA4A8NHtpjqWEAOBSIPrEkpKP2HysXQprlqRKAXWT10+N0DyQY3GUbFABQB/vCmFBoBTVkGo8slIzg9wwUr/RvD3APAB7ZIjOyA5gH+fKwRKrZcdSOFwEx+Ze8g/wOCfNaAA8CARG6fxy/uA88Dp+Yugn8Wk/5KA9sbyxsvy/jRTRADwCDhY5+GPd4flQK/fVvOVSgXf7AIZEoon9+tA3MEDgPAgFpUn/9LXgzts6yb7dudC4IkGZo1Z5/90vmfbgtHA8Ag+dlgBn8EOE0UpIC35c9H+qChMrd7PFyCTBwv60MDwICD9OAGf64ePJOrcalLDNLS7ovC5JvE9mCWNelXgwPAIHy0yrH59Bj4BaI4qyP8Xt+4Qc4gfGkUBzQtfh3LA8CAhCQf2nxxQbKNpQLF/M/aPIom9Gf4PjhoHm3AlmsDwCBi1B89754PLEa2pTjxBEU2KJgXSHqNxALEnqcoJwPAQJp4nk7pfhyy+6FzAnVe2vj/kYCpudow+hkuBCaqA8BAmiWeAfXyGPLYu3hWWMRjRajOZDkCUUss+2yKJQ8DwCEDSRtU9O4fGHmmsTyCv60riXaHIP/Y0ae9yPV3LwPAgjnRnhh/yJYY0MUtwAMDpA4bxLil8Vor6diMJOFfA8Aj2jWeN28QH/hRTh60wbArI03gJuPTPDoL7SRUmskDzgSh4L5sctw9h1rQYDUMqwQW5eR+FuP9ZUE9iQQC2wPAhBlGnjYG0loy4EncjBPAPZExLaiekfQQ+6sJSh4IA8CFITYeZfZ6H9gbxPQBDr6vWF4k6J0ZOtHyzw2/vgYDwITbJp5kb0tKrRi2EWjYt8KSlbziAzEj+QA6Pv0ZswPARMDmHh++GFutEbMapR4XdZA1i03eV4A3TAoWH/WqA8CEAEYeN3aEPdjDt4rToGRiO0MRy7QkAWWFT0g4DoEDwIRAxh+J3hgc+Ma/1kshlSrWWKFIO1+QyfnfIiWsLQPAgiAmH+rB8B+4Nr5RddjHVBtf0SoHWEQSUCGLRgruA8AlILTgIXLMH7gXoyfRJg21YxPRQw5ig5Kx4Slkb2cDwIO75eDFR4wfDEGwOBYZ50KTm0PJ4LHYs4lPwT1iDwPAI2C0Ndrloh8VBq+t13NvJnBEP+W/HlAXR69mYDRiA8CEW2VgmNA0HwSmtAkCszS0MEkutOvmdBvYI6yKLkgA=='
var base64Str = e.target.result;
// 转成.amr文件播放
dataURL2Audio(base64Str, function(entry) {
var toURL = entry.toURL();
// 播放音频
playAudio(toURL);
})
})
})
/**
* 播放音频
* @param {Object} path
*/
function playAudio(path) {
var player = plus.audio.createPlayer(path);
player.play(function() {
mui.toast("播放成功");
}, function(e) {
mui.toast("播放失败");
});
}
/**
* base64字符串转成语音文件(参考http://ask.dcloud.net.cn/question/16935)
* @param {Object} base64Str
* @param {Object} callback
*/
function dataURL2Audio(base64Str, callback) {
var base64Str = base64Str.replace('data:audio/amr;base64,', '');
var audioName = (new Date()).valueOf() + '.amr';
plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
fs.root.getFile(audioName, {
create: true
}, function(entry) {
// 获得平台绝对路径
var fullPath = entry.fullPath;
if(mui.os.android) {
// 读取音频
var Base64 = plus.android.importClass("android.util.Base64");
var FileOutputStream = plus.android.importClass("java.io.FileOutputStream");
try {
var out = new FileOutputStream(fullPath);
var bytes = Base64.decode(base64Str, Base64.DEFAULT);
out.write(bytes);
out.close();
// 回调
callback && callback(entry);
} catch(e) {
console.log(e.message);
}
} else if(mui.os.ios) {
var NSData = plus.ios.importClass('NSData');
var nsData = new NSData();
nsData = nsData.initWithBase64EncodedStringoptions(base64Str, 0);
if(nsData) {
nsData.plusCallMethod({
writeToFile: fullPath,
atomically: true
});
plus.ios.deleteObject(nsData);
}
// 回调
callback && callback(entry);
}
})
})
}
</script>
</body>
</html>
解决方案
你纠结的意思是 参数是files，其实这个是你和后端约束的。
比如用
`$.ajax({
...
data: {
files: 你的获取的base64
},
....})`
其中files就是你说的参数（key），后端会根据这个files获取你的base64。假如你写 audio，那给后台的参数是 audio： XXXX。
简单来说，就是用你平常的传递数据方式就行，$.ajax 或者 框架的 或者原生的Ajax。
这篇关于javascript - 已经把语音转成base64，但是怎么获取这个base64上传到服务器上，参数是files的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
