图片上传方案详解

桃扇骨 2022-04-10 11:18 234阅读 0赞

> **小编推荐：**[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

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

## 知识点字典 ##

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

### input 标签之 file 类型 ###

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

![1278934763-5c2dcf3e9aacf\_articlex (187Ã37)][1278934763-5c2dcf3e9aacf_articlex _187_37]

file-input 有如下属性：

1.  accept   
    指定选择文件类型的范围。默认为所有文件类型   
    图片为 accept="image/\*"   
    文件类型取值见[MDN][]
2.  capture   
    当文件类型为图片或视频且在移动端时，此属性才有意义。
    
     *  capture = 'user' 调用前置摄像头
     *  capture = 'environment' 调用后置摄像头
     *  不设置则为用户自己选择
3.  multiple   
    一个 Boolean 值，如果存在，则表示用户可以选择多个文件
4.  files   
    返回一个 FileList，列出每个所选文件对象。除非 multiple 指定了属性，否则此列表只有一个成员。主要用于 JS 操作。

<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][MDN 1]

*  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 对象的使用：

1.  用一些键值对来模拟一系列表单控件：即把 form 中所有表单元素的 name 与 value 组装成  
    一个 queryString
2.  异步上传二进制文件。

### 构造函数 ###

**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监听上传进度，不再赘述。

## 其他 ##

其他还有直接form表单提交文件等方式，可能不太自由。诸位有兴趣的可以看一下。

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，得到了Google、360、[金山软件][Link 1]、[百姓网][Link 2]等众多知名用户的认可。欢迎免费试用！

[![2018121912254161][]][2018121912254161]

[Fundebug]: https://www.fundebug.com/
[1278934763-5c2dcf3e9aacf_articlex _187_37]: /images/20220331/9a083a1e73be41cbb7cab91d093ed51c.png
[MDN]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers
[MDN 1]: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#Method_overview
[Link 1]: https://www.baidu.com/s?wd=%E9%87%91%E5%B1%B1%E8%BD%AF%E4%BB%B6&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[Link 2]: https://www.baidu.com/s?wd=%E7%99%BE%E5%A7%93%E7%BD%91&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[2018121912254161]: /images/20220331/97ba9892716d4a02931064587cf16b7c.png