本篇博客适合了解vue项目、了解eggjs、了解axios的小伙伴阅读，如果不是熟悉这些技术，可以先去看看相关视频或者网站学习。
一份表单中包含有普通参数、也有要上传的文件，将这些数据放到formdata中传递到后端进行处理。
我这里的前端用的是vue2，页面仅有一个表单，页面的代码如下：
<template>
<div class="about">
<el-form :model="form"
status-icon
label-width="100px"
class="demo-ruleForm">
<el-form-item label="内容"
prop="content">
<el-input type="text"
v-model="form.content"
autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="文件"
prop="audio">
<el-upload class="avatar-uploader"
action=""
:show-file-list="false"
:before-upload="beforeUpload"
:on-change="change">
上传
</el-upload>
<audio :src="audioSrc"
controls="controls" />
<div>{{filename}}</div>
</el-form-item>
<el-form-item>
<el-button type="primary"
@click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import $api from "../utils/api";
export default {
data: () => {
return {
filename: "",
form: { content: "" },
fileBase64: "",
audioSrc: "",
formdata: new FormData(),
};
},
watch: {},
mounted() {},
methods: {
change(file) {
console.log(file);
const isMp3 = file.raw.type === "audio/mpeg";
if (!isMp3) {
return 0;
} else {
//这的file并不是我们真正要传递的file，file.raw才是
this.formdata.append("upfile", file.raw); //将file.raw放到formdata中
this.formdata.append("filename", file.raw.name); //将文件名也放到formdata中
this.filename = file.raw.name;
this.base64_encode(file.raw); //调用base64_encode函数
}
},
//传入file，将文件转为blob类型
base64_encode(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
// console.log("file 转 base64结果：" + reader.result); //reader.result是base64码，但是因为音频较长的时候，需要转为blob才能播放
this.fileBase64 = reader.result;
let audioBlob = this.base64ToBlob(this.fileBase64, "mp3"); //将base64转为Blob
this.audioSrc = window.URL.createObjectURL(audioBlob); //设置页面上的音频的src
};
},
//将base64转为blob
base64ToBlob(base64, type) {
let arr = base64.split(",");
let array = arr[0].match(/:(.*?);/); //arr[0]是base64的开头说明
let mime = (array && array.length > 1 ? array[1] : type) || type;
let bytes = window.atob(arr[1]); //arr[1]是完整的base64码 window.atob()返回一个解码后的字符串
// console.log(bytes);
let abuffer = new ArrayBuffer(bytes.length); //二进制的数据缓冲区
// console.log(Object.prototype.toString.call(abuffer));
let u8a = new Uint8Array(abuffer);
for (let i = 0; i < bytes.length; i++) {
u8a[i] = bytes.charCodeAt(i);
}
return new Blob([abuffer], {
type: mime,
}); //最后返回一个Blob数据
},
beforeUpload(file) {
const isMp3 = file.type === "audio/mpeg";
if (!isMp3) {
this.$message.error("上传头像图片只能是 mp3 格式!");
}
return false;
},
submitForm() {
this.formdata.append("content", this.form.content); //模拟的表单普通文本
$api
.post("/audio", this.formdata) //请求后egg端接口/audio并把formdata传过去
.then((res) => {
console.log(res); //得到结果
if (res.data.status == 1) {
//存入成功
this.$message({
message: "提交成功",
duration: 1000,
type: "success",
});
this.formdata = new FormData(); //重新设置formdata
} else {
this.$message({
message: "提交失败",
duration: 1000,
type: "error",
});
}
})
.catch((e) => {
console.log(e);
});
},
},
};
</script>
前端使用的是axios来发起请求，因为我们使用FormData传递文件数据，所以需要设置请求头中的content-type为 “multipart/form-data”
import axios from "axios";
const $api = axios.create({ baseURL: "http://127.0.0.1:7001" })
$api.interceptors.request.use(function (config) {
config.headers['content-type'] = "multipart/form-data";
return config;
}, function (error) {
return Promise.reject(error);
});
export default $api;
egg后端代码，先在config.default.js中设置multipart，这里的设置官网有，但是官网只写了mode：“file”，我使用的时候，系统会报错。
这里设置一下文件大小，我设置到100mb大，可以上传小于100mb的文件。
文件类型我只做了MP3的例子，根据需要修改。
config.multipart = {
// mode: "file",
fileSize: '100mb',
mode: 'stream',
fileExtensions: ['.mp3'], // 扩展几种上传的文件格式
};
router.js文件中设置接口路由
'use strict';
/**
* @param {Egg.Application} app - egg application
*/
module.exports = app => {
const { router, controller } = app;
router.post('/audio', controller.home.uploadAudio);
};
控制器中写入uploadAudio方法，egg需要安装await-stream-ready、stream-wormhole、formidable插件
'use strict';
const Controller = require('egg').Controller;
const fs = require('fs');
const path = require('path');
const awaitWriteStream = require('await-stream-ready').write;
const sendToWormhole = require('stream-wormhole');
const audioBaseUrl = 'app/public/audio';//这是我的音频存放位置
const formidable = require("formidable");
class HomeController extends Controller {
async uploadAudio() {
const { ctx } = this;
try {
function parse(req) {//使用formidable解析formdata
const form = new formidable.IncomingForm();
return new Promise((resolve, reject) => {
form.parse(req, (err, fields, files) => {
resolve({ fields, files });
reject((res) => { console.log(res) })
});
});
}
const extraParams = await parse(this.ctx.req);
console.log("FormData中的普通参数-----------", extraParams.fields);
console.log("FormData中的文件--------------", extraParams.files);
const file = extraParams.files.upfile; //得到文件upfile，我的vue传过来的file就叫做upfile，所以这里取出来也是通upfile
const stream = fs.createReadStream(file._writeStream.path);//创建文件读取流，从临时文件中读取
const fileName = extraParams.fields.filename;//文件命名
//为保证文件的命名不重复，结合自己的项目数据库的需要，取时间戳加用户id或者其他方式
const target = path.join(audioBaseUrl, fileName);//目标路径
const writeStream = fs.createWriteStream(target);//将问价写入目标路径
try {
await awaitWriteStream(stream.pipe(writeStream));//等待完成写入
} catch (err) {
await sendToWormhole(stream);//关闭临时文件
console.log(err)
}
ctx.body = { status: 1 }
} catch (err) {
console.log(err)
ctx.body = { status: 0 }
}
}
}
module.exports = HomeController;
页面显示如下：
点击“上传”，即可选择文件，选好MP3文件后，页面可以进行播放。
egg中就可以打印出这些信息了：
并且将音频文件存入到指定的目录中
