首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用blob或base64而不是uri反应原生Javascript上传文件

在原生JavaScript中,可以使用Blob或Base64来上传文件,而不是使用URI。

  1. Blob:Blob(二进制大对象)是一种数据类型,用于存储二进制数据。它可以表示图像、音频、视频等文件。使用Blob对象可以将文件内容存储为二进制数据,并通过HTTP请求发送到服务器。

优势:

  • Blob对象可以直接存储二进制数据,无需转换为其他格式。
  • 可以通过Blob对象的方法和属性对二进制数据进行操作和处理。
  • 支持大文件上传,可以分块上传,提高上传效率。

应用场景:

  • 文件上传:可以将用户选择的文件转换为Blob对象,并通过AJAX或FormData对象将其上传到服务器。
  • 图片处理:可以将图片文件转换为Blob对象,然后进行裁剪、压缩等操作。
  • 音视频处理:可以将音视频文件转换为Blob对象,然后进行剪辑、转码等操作。

推荐的腾讯云相关产品:

  • 对象存储(COS):腾讯云对象存储(COS)是一种安全、低成本、高可靠的云存储服务,支持存储和访问任意类型的文件数据。您可以使用COS SDK将Blob对象上传到腾讯云COS,并进行管理和访问。 产品介绍链接地址:https://cloud.tencent.com/product/cos
  1. Base64:Base64是一种将二进制数据编码为ASCII字符的方法。在文件上传中,可以将文件内容转换为Base64编码的字符串,然后将其作为文本数据发送到服务器。

优势:

  • 可以将二进制数据转换为文本数据,方便在HTTP请求中传输。
  • 不需要使用额外的文件上传接口,可以直接将Base64编码的字符串作为参数发送到服务器。

应用场景:

  • 图片预览:可以将图片文件转换为Base64编码的字符串,然后将其作为<img>标签的src属性值,实现图片预览功能。
  • 数据传输:可以将文件内容转换为Base64编码的字符串,然后将其作为文本数据发送到服务器。

推荐的腾讯云相关产品:

  • 云函数(SCF):腾讯云云函数(SCF)是一种事件驱动的无服务器计算服务,可以在云端运行代码。您可以使用云函数将Base64编码的文件内容解码,并进行后续处理。 产品介绍链接地址:https://cloud.tencent.com/product/scf

请注意,以上推荐的腾讯云产品仅作为示例,其他云计算品牌商也提供类似的产品和服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JS中Buffer数据详解

也就是说他是一个二进制数据的原始缓冲区,虽然 JavaScript 是弱类型语言,但是他本身是对数据的类型和大小都有限制的,我们需要通过某种数据结构将缓冲区的内容有序的读取出来写进去 例如: Int8Array...创建读取文件的对象 var reader = new FileReader() readAsDataURL(Blob|File) 读取文件并将文件以数据URI的形式保存在result属性中,...返回一个基于 Base64 编码的 data-uri 对象 reader.readAsDataURL(files[0]) readAsText(Blob|File, opt_encoding) 返回文本字符串...3字节 ​ Silce 读取部分内容 ​ 有时候我们读取一部分不是全部内容,Filereader对象支持一个slice( )方法,在火狐中用mozSlice( ),在chrome中webkitSilde...blob URL,指的是引用保存在FileBlob中数据的URL,使用对象URL的好处是没必要把内容读取到js中,直接使用文件内容,能生成一个链接,例如 Img的src = URL ​ 创建对象URL

6.4K30

salesforce零基础学习(八十九)使用 input type=file 以及RemoteAction方式上传附件

salesforce 零基础学习(二十四)解析csv格式内容中有类似的使用此标签进行解析附件内容,后台只要声明String类型变量用来存储附件名称,Blob类型变量用来存储附件的内容即可。...但是当我们的项目整体使用第三方的前端框架,例如VUE或者angular等前端框架时,有时使用apex:inputFile反而不是很方便,需要用到html的原生的附件上传的标签<input type="file...本篇主要通过 <em>JavaScript</em>中的FileReader对象,将<em>文件</em>进行<em>base64</em>编码,然后后台进行<em>base64</em>解码来实现<em>Blob</em>对象传递到后台。...其中要注意的是<em>Base64</em>编码以后,对<em>文件</em>大小有限制,<em>使用</em>input type file最大<em>上传</em>大小为4.3M。<em>javascript</em>中<em>使用</em>FileReader对数据进行二进制处理。...篇中还有好多的地方可以优化,比如 <em>javascript</em> remoting也有最大的传输限制,String字符串也有最长的限制, FileReader<em>不是</em>所有的浏览器都兼容。

1.4K10

你不知道的 Blob

读完本文你将了解到以下内容: Blob 是什么 Blob API 简介 构造函数 属性和方法 Blob 使用场景 分片上传 从互联网下载数据 Blob 用作 URL Blob 转换为 Base64 图片压缩...Blob 通常是影像、声音多媒体文件。在 JavaScriptBlob 类型的对象表示不可变的类似文件对象的原始数据。...Blob 表示的不一定是 JavaScript 原生格式的数据。比如 File 接口基于 Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。...绝大多数现代浏览器都支持一种名为 Data URLs 的特性,允许使用 base64 对图片其他文件的二进制数据进行编码,将其作为文本字符串嵌入网页中。...Blob 类型的对象表示不可变的类似文件对象的原始数据。Blob 表示的不一定是 JavaScript 原生格式的数据。

4K20

《你不知道的 Blob》番外篇

JavaScriptBlob 对象表示一个不可变、原始数据的类文件对象,它不一定非得是大量数据,也可以表示一个小型文件的内容。...另外,JavaScript 中的 File 接口是基于 Blob,继承 Blob 的功能并将其扩展使其支持用户系统上的文件。 二、Blob 怎么用?...实现分片上传: 由于 File 是特殊类型的 Blob,可用于任意 Blob 类型的上下文,所以针对大文件传输,我们可以使用 slice 方法进行文件切割,分片上传。...Blob 类型的对象表示不可变的类似文件对象的原始数据。Blob 表示的不一定是 JavaScript 原生格式的数据。...其他区别 需要使用写入/编辑操作时使用 ArrayBuffer,否则使用 Blob 即可; Blob 对象不可变, ArrayBuffer 可以通过 TypedArrays DataView 操作

2.4K00

【笔记】618- 读《你不知道的 Blob》笔记

JavaScriptBlob 对象表示一个不可变、原始数据的类文件对象,它不一定非得是大量数据,也可以表示一个小型文件的内容。...实现分片上传: 由于 File 是特殊类型的 Blob,可用于任意 Blob 类型的上下文,所以针对大文件传输,我们可以使用 slice 方法进行文件切割,分片上传。...Blob 类型的对象表示不可变的类似文件对象的原始数据。Blob 表示的不一定是 JavaScript 原生格式的数据。...其他区别 需要使用写入/编辑操作时使用 ArrayBuffer,否则使用 Blob 即可; Blob 对象不可变, ArrayBuffer 可以通过 TypedArrays DataView 操作...1.2 长度不同 Blob URL 一般长度较短, Data URL 因为直接存储图片 base64 编码后的数据,往往比较长。

3.3K40

【前端知乎】445- File FileList 和 FileReader 对象详解

File 对象、FileList 对象与 FileReader 对象大家或许不太陌生,常见于文件上传下载操作处理(如处理图片上传预览,读取文件内容,监控文件上传进度等问题)。...最常见的使用场合是表单的文件上传控件,用户在一个 元素上选择文件后,浏览器会生成一个数组,里面是每一个用户选中的文件,它们都是 File 实例对象。...对象使用 浏览器原生提供一个 File() 构造函数,用来生成 File 实例对象。...概念介绍 FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件原始数据缓冲区)的内容,使用 File Blob 对象指定要读取的文件数据。...简单理解,就是用于读取 File 对象 Blob 对象所包含的文件内容。 2. 对象使用 浏览器原生提供一个 FileReader 构造函数,用来生成 FileReader 实例。

1.5K30

js不借助后端,多文件拖拽压缩上传,支持选择文件

在系统中上传文件时,需要支持多文件文件上传,并且需要在文件上传时需要将多文件压缩成zip包,下载的时候,直接下载zip包 听到这个需求,我的第一反应就是js应该没有强大吧,因为压缩和访问文件夹,涉及到了文件系统的读取和修改...: 1:用户选中文件文件夹后,获取文件对象, 2:遍历获取的文件对象 放入实例化的zip对象中 3:使用generateAsync()方法生成文件, 通过formdata提交到服务端 代码如下: 此案例支持拖拽上传多个文件..., 支持选择多个文件,选择单个文件夹 此外可以使用 file-saver库的saveAs对zip文件包保存到本地 <img alt...important } 这里说一下拖拽上传文件, 主要是用到的原生事件是这三个 ondrop ondragover ondragleave 加上prevent 可以防止拖拽过程...在ondragover的事件上可以处理文件拖拽到了可放置的元素上,对用户 进行友好提示. ondrop 事件是文件拖拽到了元素上,松开鼠标时触发, 这个时候可以通过事件拿到拖拽的文件列表 使用even.dataTransfer.files

3.3K10

一文了解文件上传全过程(项目中碰到的难点)

大家可能对这个步骤会比较害怕,因为可能大家对它并不是怎么熟悉,浏览器Network对它也没有详细的进行记录,因此它成为了我们心中的一根刺,我们老是无法确定,关于文件上传到底是我写的有问题呢?...面对File, formData,Blob,Base64,ArrayBuffer,到底怎么做?还有文件上传不仅仅是前端的事。...因此,掌握请求库的写法并不是我们的目标,目标只有一个还是掌握文件上传的请求头和请求内容。 ? Blob Blob 对象表示一个不可变、原始数据的类文件对象。...Blob 表示的不一定是JavaScript原生格式的数据。`File`[3] 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。...因此如果我们遇到 Blob 方式的文件上方式不用害怕,可以用以下两种方式: 1.直接使用 blob 上传 const json = { hello: "world" }; const blob = new

2.6K20

10行JavaScript代码完成图片的上传预览

下面进入主题,用原生JS给撸个图片上传,预览的小示例,希望对大家有所帮助。...这样看blob对象和base64都可以预览图片,但是blob对象仅仅是当次缓存,如果刷新,你重新把之前转的字符串放到src是不可以预览的,当时base64是可以的。...所以存库的时候不仅可以图片路径,还可以直接存base64base64很占用数据库空间,文件越大,base64字符串越大) 优化 下面我们对上面示例做优化,可以上传多张图片并预览,美化界面。 ?...clear: both; } #img-pre img{ float: left; width: 100px; height: 100px; margin-right: 10px; } javascript...document.createElement("img"); img.setAttribute("src", bold); imgPre.appendChild(img); } 主要是通过css隐藏掉input file选择文件按钮

1.7K20

从图片裁剪来聊聊前端二进制

简单的说:在JS中,有两个构造函数 File 和 Blob, File继承了所有Blob的属性。 所以在我们看来,File对象可以看作一种特殊的Blob对象。...关于Blob的更具体介绍可以参考Blob[1] atob 和 btoa base64 相信大家都不会陌生吧(不知道的看这里[2]),最常用的操作可能就是图片转 base64 了吧?...在之前要在字符串跟base64之间互转,我们可能需要去网上拷一个别人的方法,而且大部分情况下,你没有时间去验证这个方法是不是真的可靠,有没有bug。...从IE10+浏览器开始,所有浏览器就原生提供了Base64编码解码方法。...这时候裁剪后的文件就储存在blob里了,我们可以把它当作是普通文件一样,加入到FormData里,并上传至服务器了。

1.6K20

小智周末学习发现了 10 个好用JavaScript图像处理库

如果对二进制图像进行缩放,需要先加载到canvas(再保存为blob)。 2....使用浏览器的原生canvas.toBlob API来执行压缩工作,这意味着它是有损压缩。 一般使用此方法在客户端上传图像文件之前对其进行预压缩。 4....fabricjs.com/ 事例讲解:http://fabricjs.com/articles/ Github: https://github.com/fabricjs/fabric.js Fabric是一个强大简单的...简单来说我们可以通过使用Fabric从而以较为简单的方式实现较为复杂的Canvas功能 还可以使用Fabric.js库更改这些对象的某些属性,例如它们的颜色,透明度,网页上的深度位置,选择这些对象的组...该函数返回一个Promise,该Promise解析为base64数据URI。同时支持浏览器和Node.js。 7.

2.2K10

详解 JS 压缩图片

) 对象,上传到远程图片服务器; 不妨有时候我们也需要将一个 base64 字符串压缩之后再变为 base64 字符串传入到远程数据库或者再转成 File(Blob) 对象。...可以使用 FileReader 文件读取构造函数。...FileReader 对象允许 Web 应用程序异步读取存储在计算机上的文件原始数据缓冲区)的内容,使用 File Blob 对象指定要读取的文件数据。...使用对象 URL 的好处是可以不必把文件内容读取到 JavaScript直接使用文件内容。 为此,只要在需要文件内容的地方提供对象 URL 即可。...file2Image(blob, callback); } upload(url, file, callback) 上传图片(已压缩),可以使用 FormData 传入文件对象,通过 XHR 直接把文件上传到服务器

12.6K31

文件下载,搞懂这9种场景就够了

Blob 通常是影像、声音多媒体文件。在 JavaScriptBlob 类型的对象表示一个不可变、原始数据的类文件对象。...此外,该属性的作用是表明链接的资源将被下载,不是显示在浏览器中。...绝大多数现代浏览器都支持一种名为 Data URLs 的特性,允许使用 Base64 对图片其他文件的二进制数据进行编码,将其作为文本字符串嵌入网页中。...,在上传文件时,为了提高上传的效率,我们一般会使用 Blob.slice 方法对大文件按照指定的大小进行切割,然后在开启多线程进行分块上传,等所有分块都成功上传后,再通知服务端进行分块合并。...其实在传输文件的过程中,为了提高传输效率,我们可以使用 gzip、deflate br 等压缩算法对文件进行压缩。

3K10

JS魔法堂之实战:纯前端的图片预览

一、前言                                   图片上传是一个普通不过的功能,图片预览就是就是上传功能中必不可少的子功能了。...),scale(缩放图片以适应容器尺寸) src:必填项,使用绝对相对URL指向背景图片。...当URL为用户计算机本地地址时有效, img元素的src为用户计算机本地地址时会抛不允许访问本地文件系统的异常。...四、实现                                 接下来我们就利用FileReader的readAsDataURL来获取Data URI Scheme来实现图片预览的功能,IE5.5...预览的img标签使用绝对定位,从而脱离正常文档流,那么就与文档的其他元素无关了,reflow时则不会影响性能。   2.

2.3K60

手把手教你前端本地文件操作与上传

前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发,用户可通过以下三种方式操作触发: 通过input type=”file” 选择本地文件 通过拖拽的方式把文件拖过来...如果需要限制上传文件的大小就可以通过判断size属性有没有超,单位是字节,而要判断是否为图片文件就可以通过type类型是否以image开头。通过判断文件名的后缀可能会不准,通过这种判断会比较准。...,除了上面提到的img之外,另外一个很常见的是video标签,如youtobe的视频就是使用blob: 这种数据不是直接在本地的,而是通过持续请求视频数据,然后再通过blob这个容器媒介添加到video...类型话,它会自动设置enctype,如果你用默认表单提交上传文件的话就得在form上面设置这个属性,因为上传文件只能使用POST的这种编码。...上传文件用的这种multipart/form-data,参数和参数之间是且一个相同的字符串隔开的,上面的是使用: ——WebKitFormBoundary72yvM25iSPYZ4a3F 这个字符通常会取得比较长

1.8K110

前端本地文件操作与上传

前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发,用户可通过以下三种方式操作触发: 通过input type=”file” 选择本地文件...如果需要限制上传文件的大小就可以通过判断size属性有没有超,单位是字节,而要判断是否为图片文件就可以通过type类型是否以image开头。通过判断文件名的后缀可能会不准,通过这种判断会比较准。...form上面设置这个属性,因为上传文件只能使用POST的这种编码。...上传文件用的这种multipart/form-data,参数和参数之间是且一个相同的字符串隔开的,上面的是使用: ——WebKitFormBoundary72yvM25iSPYZ4a3F 这个字符通常会取得比较长...(通常是使用的框架处理了,具体的接口不需要关心应该怎么解析) 如果读取结果是ArrayBuffer的话,也是可以直接用xhr.send发送出去的,但是一般我们不会直接把一个文件的内容发出去,而是用某个字段名等于文件内容的方式

1.5K20

Blob

读完本文你将了解到以下内容: Blob 是什么 Blob API 简介 构造函数 属性和方法 Blob 使用场景 分片上传 从互联网下载数据 Blob 用作 URL Blob 转换为 Base64 图片压缩...Blob 通常是影像、声音多媒体文件。在 JavaScriptBlob 类型的对象表示不可变的类似文件对象的原始数据。...3.3 Blob 用作 URL Blob 可以很容易的作为 、 其他标签的 URL,多亏了 type 属性,我们也可以上传/下载 Blob 对象。...绝大多数现代浏览器都支持一种名为 Data URLs 的特性,允许使用 base64 对图片其他文件的二进制数据进行编码,将其作为文本字符串嵌入网页中。... encoderOptions 用于表示图片的质量,在指定图片格式为 image/jpeg  image/webp 的情况下,可以从 0 到 1 的区间内选择图片的质量。

6.1K40
领券