jquery 前端录音生成文件，flask后端接收文件数据发送http-post请求

jquery使用了语音插件，不是自己写的，不造轮子的话，可以康康录音的原理也还行。 链接

语音插件演示项目 链接
js audio recorder plugin 使用文档 链接

jquery中引用setTimeout时的注意事项 链接1

js中的file对象详解 链接2

js中的blob对象详解 链接3

blob转file对象 链接

jquery中使用formdata表单传输数据详解 链接4 链接5

filestorage对象转为file对象(二进制) 链接

flask中全局request常用属性 链接

附上看到的代码完整的文章 链接

# filestorage对象可以通过  object.read()函数读取其中存储的二进制内容。(文件上传本质上是上传文件的二进制数据)，所以可以直接用于post请求的files中。

file = request.files['file'].read()
res = requests.post(url=url, data=params, files={'file': file})

$('#record-button').on('click', function (e) {  //点击按钮开始录音
    let recorder = new Recorder({   // 新建recorder对象
    sampleBits: 16,                 // 采样位数，支持 8 或 16，默认是16
    sampleRate: 16000,              // 采样率，支持 11025、16000、22050、24000、44100、48000
    numChannels: 1,                 // 声道，支持 1 或 2， 默认是1
 });

    recorder.start().then(() => {  // 开始录音

    }, (error) => { // 出错后的处理方式
        
        console.log(`${error.name} : ${error.message}`);
    });

    $(function(){setTimeout(get_wav,4000);})  // 此处演示激活录音函数，写死录音时间。(代码此写法有待更改) 4000ms = 4s   
    //jquery中引用setTimeout时的注意事项---->链接(1)

    function get_wav(){

        let wav_blob = recorder.getWAVBlob();  //获取wav类型的blob数据。 blob类型详解--->链接(2)

        // let file = new File([wav_blob], wav_blob.name, {'type':wav_blob.type});  此处将blob类型转为file类型（可选）  file类型详解----> 链接(3)

        let formData = new FormData();  //ajax向后台传输文件时需要使用formData  formData使用详解------> 链接(4) 链接(5)

        formData.append('wav_file', wav_blob);  

        $.ajax({
            type: 'POST',
            url: '/your_url',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                if (data.msg == 'success'){
                    $('.text-box').val(data.content)  //在文本框内填充返回的文本(此处后期修改对象)
                    // 销毁录音实例，置为null释放资源，fn为回调函数，
                    recorder.destroy().then(function() {
                        recorder = null;
                    });

                }
                else {
                    console.log(data.msg)
                    
                     // 销毁录音实例，置为null释放资源，fn为回调函数，
                    recorder.destroy().then(function() {
                        recorder = null;
                    });
                }
            },
        })
    }
})

从ajax提交到flask后台的formdata对象中。
如果是这样的字符串，保存到后台的对象是一个CombinedMultiDict类型
需要从flask的全局 request.value.get(‘type’) 中获取。

formData.append("type", "upload_file")

后端Flask 获取文件数据流并发送post请求

if request.values.get('type') == 'upload_file':
    file = request.files['upload_file'].read()
#files中放置的是文件二进制流
res = requests.post(url=url, data=params, files={'file': file})