看看效果叭

解壓的文件

上傳的文件格式

測(cè)試1|||測(cè)試1的文字測(cè)試2|||測(cè)試2的文字測(cè)試3|||測(cè)試3的文字測(cè)試4|||測(cè)試4的文字測(cè)試5|||測(cè)試5的文字

實(shí)現(xiàn)的邏輯如下

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

<el-upload v-loading='loading' 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>點(diǎn)擊上傳</em> </div> <div 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;}

一次只上傳一個(gè)文件，在文件列表更新時(shí)先清除之前的文件

fileChange(file) { let obj = this.onBeforeUploadImage(file.raw); if (obj) { this.$refs.upload.clearFiles(); this.fileList = [{ name: file.name, url: file.url }]; }}

上傳的主要函數(shù)

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代碼

用到的依賴項(xiàng)

const formidable = require('formidable'); //獲取上傳的txt，并保存const path = require('path'); const AipSpeech = require('baidu-aip-sdk').speech; //百度語(yǔ)音合成sdkconst 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); //移動(dòng)文件 fs.readFile(newPath, 'utf-8', function (err, data) { if (err) { console.log(err); new Result(null, '讀取失敗').fail(res); } else { let client = new AipSpeech( 0, '百度語(yǔ)音合成key', '百度語(yǔ)音合成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];// 語(yǔ)音合成，保存到本地文件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 { // 合成服務(wù)發(fā)生錯(cuò)誤 new Result(null, '合成失敗').fail(res); } }, function (err) { console.log(err); }); } else {new Result(null, '文件格式錯(cuò)誤').fail(res); }},i * 20) } } }); });});

PS：

在node部分，在判斷需要合成的文件是否全部完成時(shí)，我是通過number的值等于0判斷完成，不知道大佬們有啥好方法不？

到此這篇關(guān)于vue + node如何通過一個(gè)Txt文件批量生成MP3并壓縮成Zip的文章就介紹到這了,更多相關(guān)vue node批量生成MP3內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！