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 相关文章推荐
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 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
PHP 输出缓存详解
2009/06/20 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
js实现二级导航功能
2017/03/03 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
客服服务心得体会
2013/12/30 职场文书
少先队入队活动方案
2014/02/08 职场文书
2015年派出所工作总结
2015/04/24 职场文书
升学宴来宾致辞
2015/07/27 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript