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 相关文章推荐
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
原生小程序封装跑马灯效果
Oct 21 Javascript
javascript代码实现简易计算器
Jan 25 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
基于php下载文件的详解
2013/06/02 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
js常见表单应用技巧
2008/01/09 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
详解原生JS动态添加和删除类
2019/03/26 Javascript
Vue实现日历小插件
2019/06/26 Javascript
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
Python构造函数及解构函数介绍
2015/02/26 Python
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
Python网页解析器使用实例详解
2020/05/30 Python
Python中过滤字符串列表的方法
2020/12/22 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
德国足球商店:OUTFITTER
2019/05/06 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
迟到检讨书800字
2014/01/13 职场文书
车间主任岗位职责
2014/03/16 职场文书
学校捐书倡议书
2015/04/27 职场文书