首页 >> js开发 >> jsvue + node如何通过一个Txt文件批量生成MP3并压缩成Zipjs大全
jsvue + node如何通过一个Txt文件批量生成MP3并压缩成Zipjs大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
看看效果叭解压的文件上传的文件格式
测试1|||测试1的文字
测试2|||测试2的文字
测试3|||测试3的文字
测试4|||测试4的文字
测试5|||测试5的文字
测试1|||测试1的文字
测试2|||测试2的文字
测试3|||测试3的文字
测试4|||测试4的文字
测试5|||测试5的文字实现的逻辑如下
上传文件
解析txt
发送内容至百度语音合成
生成文件夹放置本次合成的mp3文件，并压缩成zip
发送zip的地址给前端
上传文件解析txt发送内容至百度语音合成生成文件夹放置本次合成的mp3文件，并压缩成zip发送zip的地址给前端使用了 element-ui 的 el-upload 组件
v-loading="loading"
class="upload-demo"
drag
ref="upload"
action="#"
accept=".txt"
:before-upload="onBeforeUploadImage"
:http-request="UploadImage"
:on-change="fileChange"
:file-list="fileList"
>
将文件拖到此处，或
点击上传
v-loading="loading"
class="upload-demo"
drag
ref="upload"
action="#"
accept=".txt"
:before-upload="onBeforeUploadImage"
:http-request="UploadImage"
:on-change="fileChange"
:file-list="fileList"
>
将文件拖到此处，或
点击上传
在上传之前判断上传的文件是否符合要求
onBeforeUploadImage(file) {
const isTxt = file.type === "text/plain";
const isLt1M = file.size / 1024 / 1024 < 1;
if (!isTxt) {
this.$message.error("上传文件只能是txt格式!");
}
if (!isLt1M) {
this.$message.error("上传文件大小不能超过 1MB!");
}
return isTxt && isLt1M;
}
onBeforeUploadImage(file) {
const isTxt = file.type === "text/plain";
const isLt1M = file.size / 1024 / 1024 < 1;
if (!isTxt) {
this.$message.error("上传文件只能是txt格式!");
}
if (!isLt1M) {
this.$message.error("上传文件大小不能超过 1MB!");
}
return isTxt && isLt1M;
}一次只上传一个文件，在文件列表更新时先清除之前的文件
fileChange(file) {
let obj = this.onBeforeUploadImage(file.raw);
if (obj) {
this.$refs.upload.clearFiles();
this.fileList = [{ name: file.name, url: file.url }];
}
}
fileChange(file) {
let obj = this.onBeforeUploadImage(file.raw);
if (obj) {
this.$refs.upload.clearFiles();
this.fileList = [{ name: file.name, url: file.url }];
}
}上传的主要函数
UploadImage(param) {
this.loading = true;
const formData = new FormData();
formData.append("file", param.file);
this.$axios({
url: process.env.VUE_APP_BASE_API + "api/txtToMp3",
method: "post",
data: formData
})
.then(response => {
if (response.data.code == 0) {
this.loading = false;
this.dialogVisible = true;
this.url = response.data.data.url;
}
})
.catch(error => {
console.log(error);
});
}
UploadImage(param) {
this.loading = true;
const formData = new FormData();
formData.append("file", param.file);
this.$axios({
url: process.env.VUE_APP_BASE_API + "api/txtToMp3",
method: "post",
data: formData
})
.then(response => {
if (response.data.code == 0) {
this.loading = false;
this.dialogVisible = true;
this.url = response.data.data.url;
}
})
.catch(error => {
console.log(error);
});
}node代码用到的依赖项
const formidable = require("formidable"); //获取上传的txt，并保存
const path = require("path");
const AipSpeech = require("baidu-aip-sdk").speech; //百度语音合成sdk
const fs = require("fs");
const compressing = require("compressing"); //压缩文件夹用
const formidable = require("formidable"); //获取上传的txt，并保存
const path = require("path");
const AipSpeech = require("baidu-aip-sdk").speech; //百度语音合成sdk
const fs = require("fs");
const compressing = require("compressing"); //压缩文件夹用接口代码
router.post("/txtToMp3", async function (req, res, next) {
let form = new formidable.IncomingForm();
form.encoding = "utf-8"; //编码
form.uploadDir = path.join(__dirname + "/../txt"); //保存上传文件地址
form.keepExtensions = true; //保留后缀
form.parse(req, function (err, fields, files) {
let filename;
filename = files.file.name;
let nameArray = filename.split("."); //分割
let type = nameArray[nameArray.length - 1];
let name = "";
for (let i = 0; i < nameArray.length - 1; i++) {
name = name + nameArray[i];
}
let date = new Date();
let time = "_" + date.getTime();
let avatarName = name + time + "." + type;
let newPath = form.uploadDir + "/" + avatarName;
fs.renameSync(files.file.path, newPath); //移动文件
fs.readFile(newPath, "utf-8", function (err, data) {
if (err) {
console.log(err);
new Result(null, "读取失败").fail(res);
} else {
let client = new AipSpeech(
0,
"百度语音合成key",
"百度语音合成secret"
);
let resultData = data.split("\n");
let number = resultData.length;
let formTime = new Date().getTime();
let mp3FileDir = path.join(__dirname + "/../mp3_" + formTime);
fs.mkdirSync(mp3FileDir);
for (let i in resultData) {
setTimeout(function(){
if (resultData[i].indexOf("|||") != -1) {
let text = resultData[i].split("|||")[1];
// 语音合成，保存到本地文件
client.text2audio(text, { spd: 4, per: 4 }).then(
function (result) {
if (result.data) {
let time = resultData[i].split("|||")[0] + "_voice";
let avatarName_mp3 = mp3FileDir + "/" + time + ".mp3";
fs.writeFileSync(avatarName_mp3, result.data);
number--;
if (number == 0) {
let zipFileName = "zip/mp3_" + formTime + ".zip";
compressing.zip
.compressDir(mp3FileDir, zipFileName)
.then(() => {
let item = {
url: zipFileName,
};
new Result(item, "压缩成功").success(res);
})
.catch((err) => {
new Result(null, "压缩失败").fail(res);
});
}
} else {
// 合成服务发生错误
new Result(null, "合成失败").fail(res);
}
},
function (err) {
console.log(err);
}
);
} else {
new Result(null, "文件格式错误").fail(res);
}
},i * 20)
}
}
});
});
});
router.post("/txtToMp3", async function (req, res, next) {
let form = new formidable.IncomingForm();
form.encoding = "utf-8"; //编码
form.uploadDir = path.join(__dirname + "/../txt"); //保存上传文件地址
form.keepExtensions = true; //保留后缀
form.parse(req, function (err, fields, files) {
let filename;
filename = files.file.name;
let nameArray = filename.split("."); //分割
let type = nameArray[nameArray.length - 1];
let name = "";
for (let i = 0; i < nameArray.length - 1; i++) {
name = name + nameArray[i];
}
let date = new Date();
let time = "_" + date.getTime();
let avatarName = name + time + "." + type;
let newPath = form.uploadDir + "/" + avatarName;
fs.renameSync(files.file.path, newPath); //移动文件
fs.readFile(newPath, "utf-8", function (err, data) {
if (err) {
console.log(err);
new Result(null, "读取失败").fail(res);
} else {
let client = new AipSpeech(
0,
"百度语音合成key",
"百度语音合成secret"
);
let resultData = data.split("\n");
let number = resultData.length;
let formTime = new Date().getTime();
let mp3FileDir = path.join(__dirname + "/../mp3_" + formTime);
fs.mkdirSync(mp3FileDir);
for (let i in resultData) {
setTimeout(function(){
if (resultData[i].indexOf("|||") != -1) {
let text = resultData[i].split("|||")[1];
// 语音合成，保存到本地文件
client.text2audio(text, { spd: 4, per: 4 }).then(
function (result) {
if (result.data) {
let time = resultData[i].split("|||")[0] + "_voice";
let avatarName_mp3 = mp3FileDir + "/" + time + ".mp3";
fs.writeFileSync(avatarName_mp3, result.data);
number--;
if (number == 0) {
let zipFileName = "zip/mp3_" + formTime + ".zip";
compressing.zip
.compressDir(mp3FileDir, zipFileName)
.then(() => {
let item = {
url: zipFileName,
};
new Result(item, "压缩成功").success(res);
})
.catch((err) => {
new Result(null, "压缩失败").fail(res);
});
}
} else {
// 合成服务发生错误
new Result(null, "合成失败").fail(res);
}
},
function (err) {
console.log(err);
}
);
} else {
new Result(null, "文件格式错误").fail(res);
}
},i * 20)
}
}
});
});
});PS：在node部分，在判断需要合成的文件是否全部完成时，我是通过number的值等于0判断完成，不知道大佬们有啥好方法不？
测试1|||测试1的文字
测试2|||测试2的文字
测试3|||测试3的文字
测试4|||测试4的文字
测试5|||测试5的文字
测试1|||测试1的文字
测试2|||测试2的文字
测试3|||测试3的文字
测试4|||测试4的文字
测试5|||测试5的文字实现的逻辑如下
上传文件
解析txt
发送内容至百度语音合成
生成文件夹放置本次合成的mp3文件，并压缩成zip
发送zip的地址给前端
上传文件解析txt发送内容至百度语音合成生成文件夹放置本次合成的mp3文件，并压缩成zip发送zip的地址给前端使用了 element-ui 的 el-upload 组件
v-loading="loading"
class="upload-demo"
drag
ref="upload"
action="#"
accept=".txt"
:before-upload="onBeforeUploadImage"
:http-request="UploadImage"
:on-change="fileChange"
:file-list="fileList"
>
将文件拖到此处，或
点击上传
只能上传txt文件，且不超过1M
v-loading="loading"
class="upload-demo"
drag
ref="upload"
action="#"
accept=".txt"
:before-upload="onBeforeUploadImage"
:http-request="UploadImage"
:on-change="fileChange"
:file-list="fileList"
>
将文件拖到此处，或
点击上传
只能上传txt文件，且不超过1M
在上传之前判断上传的文件是否符合要求
onBeforeUploadImage(file) {
const isTxt = file.type === "text/plain";
const isLt1M = file.size / 1024 / 1024 < 1;
if (!isTxt) {
this.$message.error("上传文件只能是txt格式!");
}
if (!isLt1M) {
this.$message.error("上传文件大小不能超过 1MB!");
}
return isTxt && isLt1M;
}
onBeforeUploadImage(file) {
const isTxt = file.type === "text/plain";
const isLt1M = file.size / 1024 / 1024 < 1;
if (!isTxt) {
this.$message.error("上传文件只能是txt格式!");
}
if (!isLt1M) {
this.$message.error("上传文件大小不能超过 1MB!");
}
return isTxt && isLt1M;
}一次只上传一个文件，在文件列表更新时先清除之前的文件
fileChange(file) {
let obj = this.onBeforeUploadImage(file.raw);
if (obj) {
this.$refs.upload.clearFiles();
this.fileList = [{ name: file.name, url: file.url }];
}
}
fileChange(file) {
let obj = this.onBeforeUploadImage(file.raw);
if (obj) {
this.$refs.upload.clearFiles();
this.fileList = [{ name: file.name, url: file.url }];
}
}上传的主要函数
UploadImage(param) {
this.loading = true;
const formData = new FormData();
formData.append("file", param.file);
this.$axios({
url: process.env.VUE_APP_BASE_API + "api/txtToMp3",
method: "post",
data: formData
})
.then(response => {
if (response.data.code == 0) {
this.loading = false;
this.dialogVisible = true;
this.url = response.data.data.url;
}
})
.catch(error => {
console.log(error);
});
}
UploadImage(param) {
this.loading = true;
const formData = new FormData();
formData.append("file", param.file);
this.$axios({
url: process.env.VUE_APP_BASE_API + "api/txtToMp3",
method: "post",
data: formData
})
.then(response => {
if (response.data.code == 0) {
this.loading = false;
this.dialogVisible = true;
this.url = response.data.data.url;
}
})
.catch(error => {
console.log(error);
});
}node代码用到的依赖项
const formidable = require("formidable"); //获取上传的txt，并保存
const path = require("path");
const AipSpeech = require("baidu-aip-sdk").speech; //百度语音合成sdk
const fs = require("fs");
const compressing = require("compressing"); //压缩文件夹用
const formidable = require("formidable"); //获取上传的txt，并保存
const path = require("path");
const AipSpeech = require("baidu-aip-sdk").speech; //百度语音合成sdk
const fs = require("fs");
const compressing = require("compressing"); //压缩文件夹用接口代码
router.post("/txtToMp3", async function (req, res, next) {
let form = new formidable.IncomingForm();
form.encoding = "utf-8"; //编码
form.uploadDir = path.join(__dirname + "/../txt"); //保存上传文件地址
form.keepExtensions = true; //保留后缀
form.parse(req, function (err, fields, files) {
let filename;
filename = files.file.name;
let nameArray = filename.split("."); //分割
let type = nameArray[nameArray.length - 1];
let name = "";
for (let i = 0; i < nameArray.length - 1; i++) {
name = name + nameArray[i];
}
let date = new Date();
let time = "_" + date.getTime();
let avatarName = name + time + "." + type;
let newPath = form.uploadDir + "/" + avatarName;
fs.renameSync(files.file.path, newPath); //移动文件
fs.readFile(newPath, "utf-8", function (err, data) {
if (err) {
console.log(err);
new Result(null, "读取失败").fail(res);
} else {
let client = new AipSpeech(
0,
"百度语音合成key",
"百度语音合成secret"
);
let resultData = data.split("\n");
let number = resultData.length;
let formTime = new Date().getTime();
let mp3FileDir = path.join(__dirname + "/../mp3_" + formTime);
fs.mkdirSync(mp3FileDir);
for (let i in resultData) {
setTimeout(function(){
if (resultData[i].indexOf("|||") != -1) {
let text = resultData[i].split("|||")[1];
// 语音合成，保存到本地文件
client.text2audio(text, { spd: 4, per: 4 }).then(
function (result) {
if (result.data) {
let time = resultData[i].split("|||")[0] + "_voice";
let avatarName_mp3 = mp3FileDir + "/" + time + ".mp3";
fs.writeFileSync(avatarName_mp3, result.data);
number--;
if (number == 0) {
let zipFileName = "zip/mp3_" + formTime + ".zip";
compressing.zip
.compressDir(mp3FileDir, zipFileName)
.then(() => {
let item = {
url: zipFileName,
};
new Result(item, "压缩成功").success(res);
})
.catch((err) => {
new Result(null, "压缩失败").fail(res);
});
}
} else {
// 合成服务发生错误
new Result(null, "合成失败").fail(res);
}
},
function (err) {
console.log(err);
}
);
} else {
new Result(null, "文件格式错误").fail(res);
}
},i * 20)
}
}
});
});
});
router.post("/txtToMp3", async function (req, res, next) {
let form = new formidable.IncomingForm();
form.encoding = "utf-8"; //编码
form.uploadDir = path.join(__dirname + "/../txt"); //保存上传文件地址
form.keepExtensions = true; //保留后缀
form.parse(req, function (err, fields, files) {
let filename;
filename = files.file.name;
let nameArray = filename.split("."); //分割
let type = nameArray[nameArray.length - 1];
let name = "";
for (let i = 0; i < nameArray.length - 1; i++) {
name = name + nameArray[i];
}
let date = new Date();
let time = "_" + date.getTime();
let avatarName = name + time + "." + type;
let newPath = form.uploadDir + "/" + avatarName;
fs.renameSync(files.file.path, newPath); //移动文件
fs.readFile(newPath, "utf-8", function (err, data) {
if (err) {
console.log(err);
new Result(null, "读取失败").fail(res);
} else {
let client = new AipSpeech(
0,
"百度语音合成key",
"百度语音合成secret"
);
let resultData = data.split("\n");
let number = resultData.length;
let formTime = new Date().getTime();
let mp3FileDir = path.join(__dirname + "/../mp3_" + formTime);
fs.mkdirSync(mp3FileDir);
for (let i in resultData) {
setTimeout(function(){
if (resultData[i].indexOf("|||") != -1) {
let text = resultData[i].split("|||")[1];
// 语音合成，保存到本地文件
client.text2audio(text, { spd: 4, per: 4 }).then(
function (result) {
if (result.data) {
let time = resultData[i].split("|||")[0] + "_voice";
let avatarName_mp3 = mp3FileDir + "/" + time + ".mp3";
fs.writeFileSync(avatarName_mp3, result.data);
number--;
if (number == 0) {
let zipFileName = "zip/mp3_" + formTime + ".zip";
compressing.zip
.compressDir(mp3FileDir, zipFileName)
.then(() => {
let item = {
url: zipFileName,
};
new Result(item, "压缩成功").success(res);
})
.catch((err) => {
new Result(null, "压缩失败").fail(res);
});
}
} else {
// 合成服务发生错误
new Result(null, "合成失败").fail(res);
}
},
function (err) {
console.log(err);
}
);
} else {
new Result(null, "文件格式错误").fail(res);
}
},i * 20)
}
}
});
});
});PS：在node部分，在判断需要合成的文件是否全部完成时，我是通过number的值等于0判断完成，不知道大佬们有啥好方法不？
相关文章:
- jsVue中的this.$options.data()和this.$data用法说明js大全
- js解决vue中的无限循环问题js大全
- jsvue 监听窗口变化对页面部分元素重新渲染操作js大全
- jsvue键盘事件点击事件加native操作js大全
- jsvue+element-ui JYAdmin后台管理系统模板解析js大全
- jsJS的时间格式化和时间戳转换函数示例详解js大全
- jsJS实现audio音频剪裁剪切复制播放与上传(步骤详解)js大全
- js代码处理JavaScript值为undefined的7个小技巧
- jsVue组件跨层级获取组件操作js大全
- js解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题js大全
刚刚发布热门点击发布时间
- [05/19]前端外包开发:git 舍弃本地代码强制从远程库更新
- [05/19]git 提交 忽略husky git 提交 忽略eslint 检测
- [05/18]前端外包工具:如何npm清理缓冲yarn,pnpm 清理缓存
- [05/18]前端开发工具:npm和pnpm有什么区别?pnpm安装
- [05/18]前端开发:npm与yarn的区别
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
