react将前端Blob类型文件传到后台

最近在做一个关于语音识别的功能，具体需求是用户在线录制音频提交给后台，后台转写成文字输出txt文本。我使用的是一个第三方类库recordmp3.js，可以录制音频并生成一个压缩后的音频对象Blob，直接将对象Blob传到后台就可以。
真的是太天真的我以为了，我以为直接将Blob作为一个值传给后台就可以了（使用axios）
然而调接口的时候并没有把Blob传过去，当时很纳闷，明明输出是有内容的，为什么传过去是空的呢

通过各种方法我终于完美的解决了问题
原因：不能使用axios进行Blob的传参，应该将Blob对象封装成FormData对象，就像表单上传文件一样去处理
解决方法：

this.recorder.getMp3Blob(function (blob) {let mp3Blob = blob;let url = URL.createObjectURL(mp3Blob);let div = document.createElement('div');let au = document.createElement('audio');au.controls = true;au.src = url;div.appendChild(au);document.getElementById('recordingList').appendChild(div)let formData = new FormData();formData.append("file", mp3Blob,"file.mp3");let request = new XMLHttpRequest();request.open("POST", "/url",)request.onreadystatechange = () => {if (request.readyState == 4) {var res = JSON.parse(request.responseText);}}request.send(formData)});

react将前端Blob类型文件传到后台相关推荐

前端各种类型文件的转换
最近接到一个微信公众好的开发需求,拍照识别二维码并上传,踩了不少坑.有需要的小伙伴可以看看.还附有各种文件转化的方法,可以马克一下. 欢迎和我一起探讨交流~ file文件的拷贝和改名 // 复制文本域 ...
前端blob下载文件
在一个项目中, 需要下载excel, pdf, word, zip等数据模板, 而后端返回的是一个文件流, 前端就需要使用blob来下载 1.首先要在接口中添加 responseType: 'blob ...
导入文件传到后台是空对象_IOS免费P12企业证书分享！支持导入Gbox和闪电签！Windows和Mac通用！...
软件介绍: 软件名称:P12企业证书(共享证书) 适用平台:win/mac/ios签名工具 P12企业证书证书最近失效的比较快,都知道是做什么的用的,不做过多的介绍,简单来说就是给企业应用app签名 ...
SpringMVC(SSM)框架搭建JavaWeb项目时，前端页面文件上传，后台Java下载功能实现及相关问题记录说明
看在前面:前端页面通过input控件实现文件上传,后台Java使用SpringMVC框架的实现网上有较多教程,但是真正配置一遍下来不报错的较少,所以本博客前面先介绍一遍完整的设置步骤,然后介绍遇到的一 ...
blob导出的excel文件打不开，responseType: “blob“ 但 response回应类型不是blob类型，response.data是乱码。
解决方法在最下面,可以直接去看[解决方法-->正解] [问题描述] 使用blob导出.xlsx文件打开后出错,如下: WPS表格在试图打开文件时遇到错误.请尝试以下方法. 检查文档或驱动器得到 ...
swift文件服务器,Swift3一行代码将各种类型文件上传到服务器
由于之前一直在忙项目,很久没有写过一篇像样的文章了,现在手上的项目基本是完成了,正好工作时间偷个懒写两篇文章. 将相机或相册图片上传到服务器先看看最常见的图片上传,也可以选择跳过,后面有直接的封装方 ...
php文件上传绕过mime类型,文件上传限制绕过技巧
严正声明:本文仅限于技术讨论,严禁用于其他用途. 简介文件上传漏洞是web安全中经常利用到的一种漏洞形式.一些web应用程序中允许上传图片,文本或者其他资源到指定的位置,文件上传漏洞就是利用这些可以 ...
【Java报错】MultipartFile 类型文件上传 Current request is not a multipart request 问题处理（postman添加MultipartFile）
1. 问题描述一个正常的Excel文档上传并导入其数据的接口开发,首先出现问题的是 Doc 文档,我使用的是: <dependency><groupId>com.github ...
数据库存取BLOB类型音乐文件的过程及常见错误
数据库存取BLOB类型音乐文件的过程及常见错误数据库端的准备工作: 新建表,用来存放音乐文件:mymusic 第一列:id 类型:int 第二列:music 类型:blob 将音乐文件存入数据库 / ...

react将前端Blob类型文件传到后台

react将前端Blob类型文件传到后台

react将前端Blob类型文件传到后台相关推荐

最新文章

热门文章