未加星标

图片上传方案详解

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2019 | 作者 红领巾 ] 0人收藏点击收藏

以往用到图片上传功能都是直接使用现成的插件,今天把其中用到的知识点整理一下。

知识点字典 input 标签之 file 类型 FileReader 对象:读取文件 FileReader.readAsDataURL():将读取的文件转换为 base64 编码的字符串 FormData 对象 使用 axios 上传 input 标签之 file 类型

当设置 input 标签 type 为 file 时,input 表现性状为上传文件样式


图片上传方案详解

file-input 有如下属性:

accept
指定选择文件类型的范围。默认为所有文件类型
图片为 accept="image/*"
文件类型取值见MDN capture
当文件类型为图片或视频且在移动端时,此属性才有意义。 capture = 'user' 调用前置摄像头 capture = 'environment' 调用后置摄像头 不设置则为用户自己选择 multiple
一个 Boolean 值,如果存在,则表示用户可以选择多个文件 files
返回一个 FileList,列出每个所选文件对象。除非 multiple 指定了属性,否则此列表只有一个成员。主要用于 JS 操作。 <!-- html --> <input type="file" multiple id="imgLocal" accept="image/*" /> 复制代码 // js let inp = document.querySelector('#imgLocal') inp.onchange = function(e) { let fileList = document.querySelector('#imgLocal').files console.log(fileList) //files } 复制代码 FileReader 对象

我们用 FileReader 对象实现图片预览功能。

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

构造函数 new FileReader()

返回一个新构造的 FileReader。

属性 FileReader.readyState
表示 FileReader 状态的数字,取值如下 0:EMPTY/还没有加载任何数据 1:LOADING/数据正在被加载 2:DONE/已完成全部的读取请求 FileReader.result
文件的内容。该属性仅在读取操作完成后才有效。 FileReader.error 事件及方法

我们主要是用 FileReader.onload 事件及 FileReader.readAsDataURL() 方法,其他见MDN

FileReader.onload
处理 load 事件。该事件在读取操作完成时触发 FileReader.readAsDataURL() 开始读取指定的 Blob 中的内容。一旦完成,result 属性中将包含一个 data: URL 格式的字符串以表示所读取文件的内容。 //继续使用上文的fileList let file = fileList[0] const fileReader = new FileReader() fileReader.readAsDataURL(file) //读取图片 fileReader.addEventListener('load', function() { // 读取完成 let res = fileReader.result // res是base64格式的图片 }) 复制代码

我们将 DOM 上 img 的 src 设为读取的结果即可实现预览功能。

FormData 对象

FormData 对象的使用:

用一些键值对来模拟一系列表单控件:即把 form 中所有表单元素的 name 与 value 组装成 一个 queryString 异步上传二进制文件。 构造函数 new FormData()

返回一个新构造的 FormData。

方法

FormData 方法有很多。我们这里只用了她的 append()方法

formData.append(name, value, filename) name:属性名 value:属性值,在我们这里则指 file 数据 filename:当第二个参数为 file 或 blob 时,告诉服务器的文件名。Blob 对象的默认文件名是“blob”。File 对象的默认文件名 是文件的文件名。 // 继续使用上文的file const formDate = new FormData() formDate.append('userPicture', file, '1.jpg') 复制代码 使用 axios 上传

主要是设置 header 中的 Content-Type

直接上代码

//继续使用上文的formDate let config = { headers: { 'Content-Type': 'multipart/form-data' } } axios .post('serverUrl', formDate, config) .then(res => { console.log(res) }) .catch(err => { console.log(err) }) 复制代码

axios 亦可 使用onUploadProgress监听上传进度,不再赘述。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:图片上传方案详解
本站链接:https://www.codesec.net/view/628197.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(22)