input标签选择文件并回显，以及深入ajax文件的上传

Html结构

<input ref="fileInput" type="file" style="display: none" @change="handleFileUpdate" :accept="fileAccept">
<button @click="handleUploadBtnClick">点击上传<button/>

需要说明的是，这是在vue中写的。其中input标签上的accept属性表示选择文件时的文件类型，change事件主要是上传了文件后，input的值改变触发该事件，实现选择文件的获取。

fileAccept定义如下

fileAccept = '.png, .jpg, .jpeg, .svg'

Vue中实现点击按钮代码触发input点击事件。

通常来说，页面上我们不会直接放一个input来作为用户点击上传文件的按钮，一般会设置一个比较好看的按钮来代替。通过点击这个按钮来触发input的点击事件，显示文件选择对话框。所以这里 handleUploadBtnClick 方法的作用就是去触发input的点击。

handleUploadBtnClick() {
    this.$refs.fileInput.dispatchEvent(new MouseEvent('click'))
}

this.$refs.fileInput就是去获取input标签，以前在jquery中一般是下面这样写的

    $('input).trigger('click')

当在对话框中选择了文件过后，会触发input标签的change事件，也就是进入handleFileUpdate方法的逻辑。handleFileUpdate 方法在这里实现两个事情，第一是获取选择的文件，第二是将选择的文件回显到页面上。第二个逻辑在实际开发的需求中一般是将文件上传给后台接口。

handleFileUpdate(e) {
  var fileList = e.target.files;    // 文件默认是列表
  var file = fileList[0]
  var fileReader = new FileReader() // 文件读取
  fileReader.readAsDataURL(file)
  fileReader.onload = () => {
    console.log(fileReader.result);
    this.userIcon = fileReader.result
  }
}

e是js原生事件的默认参数。

e.target.files就是刚刚选择的图片，这里图片默认是一个列表，因为如果在input标签上设置multiple属性为"multiple"时，我们就可以选择多个文件。这里如果需要上传文件，一般处理的方式通过循环遍历这个列表，一个一个文件的上传。

FIleReader 是Html5中读取文件的API，FileReader的实例一共包含4个方法，其中readAsDataURL的作用是将文件读取为DataURL，也就是Base64编码的文件；读取的结果包含在其result属性中。其实例包含一套完整的事件模型，其中onload表示文件读取成功后触发的事件。

实现文件上传

FormData

要实现文件上传，首先得知道FormData的含义。MND上是这样解释FormData的，FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。

一共是两句话，

从第一句话我们得到的信息是FormData实例是key/value的数据结构，并且可以通过XMLHttpRequest实例的send方法发送。
第二句话表明如果请求头设置的编码类型为"multipart/form-data"，那么它会和表单一样直接发送而不会进行额外的编码。这里还需要了解的是，为什么需要设置multipart/form-data 这种请求类型

HTTP Content-Type

Content-Type是什么？
Content-Type（内容类型），用于定义网络文件的类型和网页的编码，决定浏览器将以什么形式、什么编码读取这个文件。

常见的Content-Type类型一般为 application/x-www-form-urlencoded，它表示在发送前编码所有字符。还有一种常见的是text/plain，它也会在发送前进行字符编码编码，但只会编码空格，特殊字符不会进行编码。
multipart/form-data 的含义就是不对字符进行编码。最开始，因为application/x-www-form-urlencoded不适合用于传输大型二进制数据或者非ASCII字符的数据，所以重新添加了multipart/form-data类型，此类型专门用于有效的传输的文件。

实现文件上传

原生js实现

let formData = new FormData()
formData.append('file', file)   // file为input选择的文件
formData.append('name': 'fileName') // 可以继续添加其他值

let xhr = new XMLHttpRequest()
xhr.open('post', url, true)
xhr.send(formData)

xhr.open(method, url, async) 接收三个参数分别是请求方法、请求地址、是否为异步

另外formData.append(key, value)添加键值对时，可以重复添加相同key的键值对，不会覆盖之前的。

以为这样就可以了？上面的代码是不是忘记什么东西了啊？
Content-Type的设置去哪儿了啊？？？

所以，这里又出现了一个小的疑问，为什么我们并没有设置请求头的类型Content-Type为multipart/form-data还是可以成功的上传文件？是的，我们真的上传成功，我们可以在控制台看看请求信息：

Content-Type1.png

是的，就是你现在想的，浏览器自动帮我们把请求头加上了multipart/form-data类型的设置。那么，如果我们手动设置一下会有影响吗？

我们在发送请求之前线设置一下请求头

let xhr = new XMLHttpRequest()
xhr.open('post', url, true)
xhr.setRequestHeader('Content-Type', 'multipart/form-data')
xhr.send(formData)

同样看看控制台的请求有没有不一样

Content-Type2.png

仔细看（也不用仔细看了，就是我红框标出来的地方），Content-Type确实也设置成了multipart/form-data。但是后面怎么少了一串？？？

通过比较两次请求可以看到少的是boundary=xxx这么一串，再仔细一看这个boundary=xxx后面的xxx是不是在下面的参数列表中也有啊。那么，这个boundary是什么呢？

boundary是分割符，分割多个参数；其中xxx是即时生成的字符串，避免在实际参数内容中出现。后台可以通过分隔符获取请求体里的数据

好了，搞了这么多东西，明白了我们不用在代码中特地设置Content-Type了。好像是练太极，我：师傅我全忘了。师傅：好了，你已经练成了。

jquery实现

$.ajax({
    url,
    type: 'post',
    data: formData,
    processData: false, // 不用将数据转换为对象
    contentType: false, // 不用设置数据类型
})

通过上面的说明，我们也知道为什么会设置contentType为false这句看似矛盾的代码了，为的就是避免jQuery再设置一次Content-Type，导致没有分隔符。

axios 实现

axios({
    method: 'post',
    url: 'http://192.168.2.164:3000/file_upload',
    data: formData,
    withCredentials: false,
    headers: {
      // 'Content-Type': 'multipart/form-data'
    }
})

经过实测，"axios": "^0.20.0" 即使设置了'Content-Type': 'multipart/form-data'也不会没有分隔符。个人建议还是加上这个代码设置。