精华内容
下载资源
问答
  • react将前端Blob类型文件后台

    千次阅读 2019-11-20 15:11:03
    我使用的是一个第三方类库recordmp3.js,可以录制音频并生成一个压缩后的音频对象Blob,直接将对象Blob传后台就可以。 真的是太天真的我以为了,我以为直接将Blob作为一个值后台就可以了(使用axios) 然而调...

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

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

    在这里插入图片描述

    展开全文
  • blob录音上传后台

    2019-10-07 19:50:03
    2.传递到后台的字符串需要替换空格为+,否则解码错误。 3.blob音频先读为url,base64编码,然后传输,这里还有一个问题是录音不能太长,刚刚测试99272的base64字符串长度依然可以,时长为10秒,差不多10000/s 转载...

    1.用post,可以传输base64编码后的文件,get长度不够。

    2.传递到后台的字符串需要替换空格为+,否则解码错误。

    3.blob音频先读为url,base64编码,然后传输,这里还有一个问题是录音不能太长,刚刚测试99272的base64字符串长度依然可以,时长为10秒,差不多10000/s

    转载于:https://www.cnblogs.com/jiexing/p/11300794.html

    展开全文
  • 我是利用blob下载后台写好的模板以及导出所有数据的excel首先导入所需的js文件 新建一个文件夹 里面放置两个文件Blob.js和 Export2Excel.js。 安装三个依赖: npm install -S file-saver xlsx npm install -D ...

    我是利用blob下载后台写好的模板以及导出所有数据的excel

    首先导入所需的js文件

      新建一个文件夹    

        里面放置两个文件Blob.js和 Export2Excel.js

       安装三个依赖:

                 npm install -S file-saver xlsx

                 npm install -D script-loader

    // 用户管理导出
    if ( btn. action === 'exportUser') {
    this. $http({
    url: API_GATEWAY + '/api/users/export',
    method: 'POST',
    headers: {
    'Authorization' : 'Bearer ' + JSON. parse( window. sessionStorage. getItem( 'token')),
    'Accept' : 'application/json',
    'X-TenantId' : JSON. parse( window. sessionStorage. getItem( 'user')). tenantId,
    'Content-Type' : 'application/x-www-form-urlencoded;charset=utf8'
    },
    responseType: 'arraybuffer'
    }). then( function ( response) {
    var blob = new Blob([ response. data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
    // blob(size,type) Blob构造函数,接受两个参数。第一个参数是一个包含实际数据的数组,第二个参数是数据的类型
    var objectUrl = URL. createObjectURL( blob)
    var a = document. createElement( 'a')
    document. body. appendChild( a)
    a. setAttribute( 'style', 'display:none')
    a. setAttribute( 'href', objectUrl)
    var filename = '用户信息.xlsx'
    a. setAttribute( 'download', filename)
    a. click()
    URL. revokeObjectURL( objectUrl)
    })
    return
    }


    // 用户管理下载模板
    if ( btn. action === 'downloadFile') {
    this. $http({
    url: API_GATEWAY + '/api/users/downloadFile',
    method: 'POST',
    headers: {
    'Authorization' : 'Bearer ' + JSON. parse( window. sessionStorage. getItem( 'token')),
    'Accept' : 'application/json',
    'X-TenantId' : JSON. parse( window. sessionStorage. getItem( 'user')). tenantId,
    'Content-Type' : 'application/x-www-form-urlencoded;charset=utf8'
    },
    responseType: 'arraybuffer'
    }). then( function ( response) {
    var blob = new Blob([ response. data], { type: 'application/vnd.ms -excel' })
    var objectUrl = URL. createObjectURL( blob)
    var a = document. createElement( 'a')
    document. body. appendChild( a)
    a. setAttribute( 'style', 'display:none')
    a. setAttribute( 'href', objectUrl)
    var filename = '用户导入数据模板.xlsx'
    a. setAttribute( 'download', filename)
    a. click()
    URL. revokeObjectURL( objectUrl)
    })
    return
    }


    展开全文
  • js后台blob格式图片显示在本地

    千次阅读 2019-01-30 14:27:44
    直接上代码: ...xhr.responseType = “blob”; xhr.open(“GET”,url,true); xhr.setRequestHeader(key,value); xhr.onload = function(){ if(xhr.status == 200){ var blob = this.response; v...

    直接上代码:
    var xhr = new XMLHttpRequest();
    xhr.responseType = “blob”;
    xhr.open(“GET”,url,true);
    xhr.setRequestHeader(key,value);
    xhr.onload = function(){
    if(xhr.status == 200){
    var blob = this.response;
    var img = new Image();
    img.width = 200;
    img.height = 200;
    img.onload = function(){
    window.URL.revokeObjectURL(img.src);
    }
    img.src = window.URL.createObjectURL(blob);
    }
    }
    xhr.send();
    在这里插入图片描述

    展开全文
  • 前几天,做了个demo,后端返回给了我一长串json数据,需要我前端直接处理成文件下载,这个可以用Blob和a标签的download属性来做 //方法直接写在了vue的methods里面,当然用原生的js也可以 ..... methods:{ download()...
  • 项目中难免会遇到预览文件或者下载文件的场景,如果后台返回的是base64或者图片格式还好说,...处理这种特殊返回值时需要设置axios的responseType为blob,防止axios内部默认处理返回值,导致无法解析: axios.g...
  • 这里写自定义目录标题后台传文件流blob对象前端下载文件问题解决方案,转成bolb对象创建Blob对象创建链接 后台传文件流blob对象前端下载文件 问题 在页面下载文件时,可以根据路径如 a 标签的 href="" ,但是有时将...
  • Blob.js如下: /* eslint-disable */ /* Blob.js * A Blob implementation. * 2014-05-27 * * By Eli Grey, http://eligrey.com * By Devin Samarin, https://github.com/eboyjr * License: X11/MIT * See L...
  • react编项目的时候遇到一个需求,实现作品的保存与下载编辑功能:将网页上的blob对象上传到服务器,以文件的形式保存;下载服务器的作品到网页上进行编辑,读取文件内容并发送到前端。 当前只记录实现的流程,blob...
  • 前端使用Blob处理后台传输的文件流

    千次阅读 2020-09-01 11:15:34
    调接口时添加 responseType: ‘blob’ return request('接口', { method: 'POST', responseType: 'blob', data:{ ...params, }, }); 对返回的文件流进行处理 response为获取到的文件流 (response: any) =>...
  • #转:js 图片上传后台的几种格式,formData,base64,file,blob流 1、创建formData来完成file上传[ <input t...
  • 前端js代码var reader = new FileReader();reader.readAsArrayBuffer(file); //文件是excel文件reader.onload = function () {//alert("load");var blob = new Blob([reader.result]);//提交到服务器var fd = new ...
  • <input type="file" id="imgfile" name="pic" multiple> <script> $("#imgfile").change(function () { var formData = new FormData(); $.each($('#imgfile')[0].files, function (i, file) { ...
  • 1.第一种方法(blob转url) 2.第二种方法(blob转base64)
  • JS——blob

    2020-04-03 16:54:20
    1、【HTML5】Blob对象 (1)写在前面:本小节主要介绍Blob对象属性及作用,通过demo介绍blob对象的应用场景。 blob对象:一直以来,JS都没有比较...blob对象中的数据并不一定得是JavaScript中的原生形式。file接口...
  • this.$axios({ ... responseType: 'blob', headers: { Authorization: 'Bearer ' + localStorage.TOKEN } }).then(res => { const dataInfo = res.data let content = res.headers['content-disposit..
  • 读取信息 const fileReader = new FileReader() fileReader.onloadend = () => { const jsonData = JSON.parse(fileReader.result) // 后台信息 console.log(jsonData) util.$message.showInfo(jsonData.msg) } ...
  • 最近在做以post请求方式导出excel时,想到了可以使用Blob对象将后台返回的输出流以arraybuffer或blob的格式接收交给Blob处理,最后使用URL生成链接,供浏览器下载excel。 环境 vue2.x webpack3.x axi
  • //注意:如果res是二进制流字符串而不是blob,则需要通过new Blob([res])转化成blob var downloadElement = document.createElement('a'); var href = window.URL.createObjectURL(res); //创建下载的链接
  • React用fetch向后台传输Blob,File

    千次阅读 2019-03-26 21:16:45
    React用fetch向后台传输Blob,File 1.Base64是什么      Base64一般用于在HTTP协议下传输二进制数据,Base64是一种用64个字符来表示任意二进制数据的方法。因此需要用6bit来表示字符(2的6...
  • javascript之使用Blob对象下载文件

    千次阅读 2018-11-23 16:33:07
    Blob是一个类文件的不可变的原始数据对象,非javascript原生数据类型,File对象就是继承自Blob对象,且在Blob的基础上进行扩展,以便支持用户系统上的文件。 前言 最近在做以post请求方式导出excel时,想到了可以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,948
精华内容 3,979
关键字:

blobjs传后台