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 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
Javascript基础教程之变量
Jan 18 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
微信小程序wx:for循环的实例详解
Oct 07 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
vuex存值与取值的实例
Nov 06 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
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
vue之延时刷新实例
2019/11/14 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
Python之web模板应用
2017/12/26 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
早读迟到检讨书
2014/01/24 职场文书
车间机修工岗位职责
2014/02/28 职场文书
机电一体化求职信
2014/03/10 职场文书
解除劳动合同协议书
2014/04/14 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
小学感恩主题班会
2015/08/12 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android
python数字图像处理:图像的绘制
2022/06/28 Python