利用formData上传input选中的文件

<input id="my_text" type="file" accept="image/*" multiple>

accept属性来规定上传文件类型

multiple属性允许上传多个文件

如何获取input选中的文件流？

第一：获取input标签

let input = document.getElementById('my_input')

第二：通过files属性获取文件

input.files属性能得到已经选中的文件，input.files是一个数组

例子：选中两个文件

console.log(input.files)

第三：拿到文件，那么该如何上传呢？

利用FormData对象，一个XMLHttpRequest对象接口的api

const fd = new FormData

fd.append('file', input.files[0])

fd.append('file', input.files[1])

.......

FormData对象的方法

FormData接口的append() 方法 会添加一个新值到 FormData 对象内的一个已存在的键中，如果键不存在则会添加该键

FormData.set 和 append() 的区别在于，如果指定的键已经存在，FormData.set 会使用新值覆盖已有的值，而 append() 会把新值添加到已有值集合的后面

FormData.delete() 方法 会从 FormData对象中删除指定 key 和它对应的 value(s)。

formData.get(name);将要获取值的键名

 

第四：利用axios上传文件

axios({

url: 'http://'+window.location.hostname+'/api/'+ filePicture,

headers: {

        'Content-Type': 'multipart/form-data'

      },

data: fd, // 要上传的文件

method: 'POST',

})