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 相关文章推荐
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
微信小程序实现图片上传功能
May 28 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
VSCode launch.json配置详细教程
Jun 18 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使用base64加密解密图片示例分享
2014/01/20 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
JavaScript Prototype对象
2009/01/07 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
vuejs如何配置less
2017/04/25 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
python 利用toapi库自动生成api
2020/10/19 Python
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
老干部工作先进集体事迹材料
2014/05/21 职场文书
2014年党员整改措施
2014/10/24 职场文书
观后感格式
2015/06/19 职场文书
行政复议决定书
2015/06/24 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技