vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip


Posted in Javascript onJune 02, 2020

看看效果叭

vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip

解压的文件

vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip

上传的文件格式

测试1|||测试1的文字
测试2|||测试2的文字
测试3|||测试3的文字
测试4|||测试4的文字
测试5|||测试5的文字

实现的逻辑如下

  • 上传文件
  • 解析txt
  • 发送内容至百度语音合成
  • 生成文件夹放置本次合成的mp3文件,并压缩成zip
  • 发送zip的地址给前端

使用了 element-ui 的 el-upload 组件

<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"
 >
 <i class="el-icon-upload"></i>
 <div class="el-upload__text">
  将文件拖到此处,或
  <em>点击上传</em>
 </div>
 <div class="el-upload__tip" slot="tip">只能上传txt文件,且不超过1M</div>
</el-upload>

在上传之前判断上传的文件是否符合要求

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 }];
  }
}

上传的主要函数

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"); //压缩文件夹用

接口代码

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判断完成,不知道大佬们有啥好方法不?

到此这篇关于vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip的文章就介绍到这了,更多相关vue node批量生成MP3内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
Js动态创建div
Sep 25 Javascript
点击文章内容处弹出页面代码
Oct 01 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
javascript入门教程基础篇
Nov 16 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
Html5生成验证码的示例代码
May 10 Javascript
js简单实现自动生成表格功能示例
Jun 02 #Javascript
JS中准确判断变量类型的方法
Jun 01 #Javascript
Vuex中的Mutations的具体使用方法
Jun 01 #Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 #Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 #Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 #Javascript
JS如何寻找数组中心索引过程解析
Jun 01 #Javascript
You might like
AM/FM收音机的安装与调试
2021/03/02 无线电
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
python中将字典转换成其json字符串
2014/07/16 Python
python检测远程端口是否打开的方法
2015/03/14 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
大学生毕业的自我评价分享
2014/01/02 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
关于环保的建议书
2014/05/12 职场文书
财务检查整改报告
2014/11/06 职场文书
导游词怎么写
2015/02/04 职场文书
2015年实习单位评语
2015/03/25 职场文书
劳动模范获奖感言
2015/07/31 职场文书
React自定义hook的方法
2022/06/25 Javascript