JS上传文件(base64字符串和二进制文件流)
①以base64字符串上传(使用FileReader对象获取文件的base64字符串)
FileReader参考文档: FileReader - Web API 接口参考 | MDN
FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
FileReader:
- readAsArrayBuffer():开始读取指定的 Blob中的内容,一旦完成,result 属性中保存的将是被读取文件的ArrayBuffer 数据对象。
- readAsBinaryString():开始读取指定的Blob中的内容。一旦完成,result属性中将包含所读取文件的原始二进制数据。
- readAsDataURL():开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。
- readAsText():开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个字符串以表示所读取的文件内容。
<inputref="upload"type="file"accept="image/*,application/pdf"@change="uploadFile($event.target.files)"style="display: none;" />
<!-- 普通点击上传 -->
<div @click="$ref.upload.click()" class="m-upload">选择文件</div>
<!-- 拖动文件上传 -->
<div @click="$refs.upload.click()" ref="dragUpload" class="m-upload"><img src="@/assets/images/add-upload.svg" class="u-upload" /><div class="assist"></div>
</div>mounted () {// 将ref为dragUpload的元素变成drop区域this.$refs.dragUpload.addEventListener('dragenter', this.dragenter, false)this.$refs.dragUpload.addEventListener('dragover', this.dragover, false)this.$refs.dragUpload.addEventListener('drop', this.drop, false)
},
methods: {dragenter (e) {e.stopPropagation()e.preventDefault()this.$once('hook:beforeDestroy', function () {removeEventListener('dragenter', this.dragenter)})},dragover (e) {e.stopPropagation()e.preventDefault()this.$once('hook:beforeDestroy', function () {removeEventListener('dragover', this.dragover)})},drop (e) { // 拖拽上传方法e.stopPropagation()e.preventDefault()const files = e.dataTransfer.filesthis.uploadFile(files)this.$once('hook:beforeDestroy', function () {removeEventListener('drop', this.drop)})},uploadFile (files) { // 统一上传文件方法console.log('开始上传 upload-event files:', files)if (files.length) {var reader = new FileReader()// reader.readAsBinaryString(files[0])reader.readAsDataURL(files[0]) // 以base64方式读取文件内容reader.onloadstart = function (e) { // 当读取操作开始时触发const fileSize = e.totalif (fileSize > 1024 * 500) { // 大于500KB时取消上传reader.abort()} else {console.log('开始读取 onloadstart:', e)}}reader.onabort = function (e) { // 当读取操作被中断时触发console.log('读取中止 onabort:', e)}reader.onerror = function (e) { // 当读取操作发生错误时触发console.log('读取错误 onerror:', e)}reader.onprogress = function (e) { // 在读取Blob时触发,读取上传进度,50ms左右调用一次console.log('读取中 onprogress:', e)console.log('已读取:', Math.ceil(e.loaded / e.total * 100) + '%')}const that = thisreader.onload = function (e) { // 当读取操作成功完成时调用console.log('读取成功 onload:', e)// 该文件的base64数据,前端可直接用来展示图片// that.preImg = e.target.result// 若使用<img id="img">标签展示图片,可直接赋值src属性// document.getElementById('img').src = e.target.result// 调用上传接口,上传base64格式的文件数据const fileType = files[0].type.slice(files[0].type.indexOf('/') + 1)var formData = {uploadFile: e.target.result,fileFormat: fileType}console.log('提交数据:', formData)upload(formData).then(res => {console.log('upload-res:', res)if (res.message.code === 0) {that.fileUrl = res.data.url}}).finally(() => {// input的change事件默认保存上一次input的value值,同一value值(根据文件路径判断)在上传时不重新加载that.$refs.upload.value = ''})}reader.onloadend = function (e) { // 当读取操作结束时触发(要么成功,要么失败)触发console.log('读取结束 onloadend:', e)}}}
}
.m-upload { // 拖动区域元素position: relative;display: inline-block;width: 98px;height: 98px;background: #FFFFFF;border: 1px dashed #D1D1D1;text-align: center;cursor: pointer;.u-upload { // 垂直居中width: 20px;height: 20px;display: inline-block;vertical-align: middle;}.assist { // 垂直居中辅助元素height: 100%;width: 0;display: inline-block;vertical-align: middle;}
}
②以二进制文件流上传(使用FormData模拟form表单提交)
FormData参考文档: FormData - Web API 接口参考 | MDN
FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式,并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去,本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data",它会使用和表单一样的格式。
实现了 FormData 接口的对象可以直接在for...of结构中使用,而不需要调用entries() : for (var p of myFormData) 的作用和 for (var p of myFormData.entries()) 是相同的。
FormData方法:
- FormData.append():向 FormData 中添加新的属性值,FormData 对应的属性值存在也不会覆盖原值,而是新增一个值,如果属性不存在则新增一项属性值。
- FormData.delete():从 FormData 对象里面删除一个键值对。
- FormData.entries():返回一个包含所有键值对的iterator对象。
- FormData.get():返回在 FormData 对象中与给定键关联的第一个值。
- FormData.getAll():返回一个包含 FormData 对象中与给定键关联的所有值的数组。
- FormData.has():返回一个布尔值表明 FormData 对象是否包含某些键。
- FormData.keys():返回一个包含所有键的iterator对象。
- FormData.set():给 FormData 设置属性值,如果FormData 对应的属性值存在则覆盖原值,否则新增一项属性值。
- FormData.values():返回一个包含所有值的iterator对象。
uploadFile (files) {console.log('开始上传 upload-event files:', files)if (files.length) {if (files[0].size > 500 * 1024) { // 校验文件大小this.content = '文件大小不能超过500KB'this.showTip = true} else {const fileType = files[0].type.slice(files[0].type.indexOf('/') + 1)var formData = new FormData()formData.set('uploadFile', files[0])formData.set('fileFormat', fileType)// 调用接口上传文件upload(formData).then(res => {console.log('upload-res:', res)if (res.message.code === 0) {this.fileUrl = res.data.url}}).finally(() => {this.$refs.upload.value = ''})}}
}
JS上传文件(base64字符串和二进制文件流)相关推荐
- 七牛云 vue 图片上传简单解说,js 上传文件图片
七牛云 vue 图片上传简单解说,js 上传文件图片 一.七牛云简介 首次使用七牛云存储进行项目的图片存储,整了一上午才整明白,这些官方的教程把明白人也给说糊涂了,文档很不规范. 七牛云有免费的使用额 ...
- js上传文件到c 服务器,js上传文件到c服务器
js上传文件到c服务器 内容精选 换一换 安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分别安装数据 ...
- 风尚云网学习-H5+css3+js上传文件页面提交不跳转
风尚云网学习-HTML+原生js上传文件页面提交不跳转页面效果图: 众所周知,from表单提交后会自动跳转url, 此时我们可以用一个空的frame 接收,阻止跳转 废话不多说,上全部代码: < ...
- [原创]使用ajaxFileUpload.js上传文件时附带额外参数。
最近公司的一个项目涉及到导入Excel的功能,于是就想到用ajaxFileUpload来实现上传文件,因为用过很多次了,网上也有很多文章介绍.使用方法不表.但是在附带参数这个环节卡住了:文件可以上传到 ...
- 纯js上传文件 很好用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 上传文件Base64格式(React)
记录一下上传文件时将文件数据转为Base64的方法 通过 FileReader对象创建一个实例,然后使用 readAsDataURL方法将数据转为Base64格式 注意: 读取过程是异步的 绑定onl ...
- html表单调用js文件上传,简单实现js上传文件功能
本文实例为大家分享了js实现上传文件功能的具体代码,供大家参考,具体内容如下 一.用input完成上传,效果图如 选择文件后,提交后出现图片url 二.传输格式采用form-data形式. html代 ...
- vue、微信小程序上传文件(base64格式、一般格式)及vue的表格导入和导出
一.上传文件 1.vue项目 base64格式 onInputChange(el) {var self = this;let file=el.file;let type=file.type.split ...
- Node.js 上传文件(multiparty包) (基于express)
文件上传.js: //文件上传插件的使用 multiparty包 /* body-parser包只能处理post请求,不能上传图片. multiparty包post请求和文件都可以处理 1.cnpm ...
最新文章
- 敏捷开发之道(二)极限编程XP
- 基于单片机自动升旗系统_基于视觉定位的机器人全自动冲击系统
- apache hive_通过6个简单的步骤在Windows上运行Apache Hive
- iphone如何信任软件_苹果企业开发者证书成漏洞 盗版商发布破解版iPhone应用
- nyoj_218_Dinner_201312021434
- Python风格总结:函数
- 2.mysql高级查询
- Java中的final、static、this、super 关键字
- ArcMAP问题集锦(一)
- 各种网线的分类和区别
- c语言 delphi,delphi和c语言的比较 极其粗浅 菜鸟共勉
- POJ 3744 Scout YYF I:概率dp
- java流分类_什么是流分类-JAVA中什么是流?流经常按照哪几种方式分类,每种方式又将流各分? 爱问知识人...
- 该怎么复习安徽省考计算机专业课
- mysql的auto_increment报错1467
- 11大Java开源中文分词器的使用方法和分词效果对比,当前几个主要的Lucene中文分词器的比较...
- Java软件架构设计
- 垃圾回收之如何判断对象可以回收、四种引用以及实际案例操作
- Java网络爬虫(三)爬取网络小说
- [kpw] USBNetwork的网连模式
热门文章
- 用金蝶kis录入数量初始数据的方法
- 使用ICGC数据库进行肿瘤组织突变分析,绘制瀑布图等
- 关于onenote右键图片快速裁剪
- 关于VSCode以及DEV-C++在进行网络编程时出现的WS2_32链接问题
- 红外报警c语言,基于51单片机的人体红外报警器程序设计
- 软件安全之代码注入技术 向目标 PE 文件注入 DLL notepad lpk.dll 远程线程函数 提权函数 OpenProcess VirtualAllocEx
- win10安装ubuntu16.04双系统(一)
- Game Maker 基金会呈献:归属之谷
- 程序员疯抢的 Java 面试宝典(PDF 版)限时开源,别把大厂想的那么难,关键是你准备得如何
- Unity随记(七) shader实现石像石化效果