FormData的使用及input文件上传

1.FormData 对象的使用：

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

2.使用

1.FormData对象的操作方法，全部在原型中，自己本身没任何的属性及方法。

let formData = new FormData()
formData.append('user', 'zhang')
获取 formData.get('user')  //zhang
删除 formData.append('user')

2.使用FormData对象发送文件 在文件上传时

 <input type="file" accept="image/*"
            @change="onFileChange" >

在选择文件上传时，使用FormData对file进行处理，然后再发送给后端接口，即可实现文件的上传。

 onFileChange(e){
   let files = e.target.files || e.dataTransfer.files;
    // 通过FormData将文件转成二进制数据
   let formData = new FormData();
   // 将文件转二进制
   formData.append('upload',files[0])

  axios.post(formData,url).then(function(){})
 }
 
 
 // 监听文件上传的进度
 
      let onprogress = function (ev) {
    // 事件对象
    // console.log(ev);

        var percent = (ev.loaded / ev.total) * 100 + '%';

        progress.style.width = percent;
    }

3.input文件上传，移动端调用相机

<input  type="file" accept="image/*" capture="camera"  />

<!--可调用相机或相册-->
<input  type="file" accept="image/*"   />