用FormData对象实现图片上传

formData对象是在XMLHttpRequest 2级定义的，通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果使用的是

表单格式提交数据，则需要把表单的编码类型设置为multipart/form-data ，然后通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同。当然也可以不采用form表单的形式提交。一般采用formData对象实现图片或文件的上传，这里主要说一下图片上传过程的实现。（这里的开发环境是vue）首先要在html中添加file类型的input：

<input type="file" accept="*/" ref="headImg" v-on:change="updateImg($event)">

然后创建一个FormData对象，并调用它的append()方法添加字段，就像这样：

let {databack} = this;
let headForm = $event.target.files[0];//获取触发上传图片操作的input元素
let imgFormData = new FormData();//创建一个formData对象
imgFormData.append("pic", headForm);//将相关input元素以键值对的方式插入到所创建的formData对象中，这里的pic是后端给的接口文档中定义的传入参数的名称

接下来就是要调取接口并获取所对应的线上图片地址，并插入到页面中：

          this.$http.post(this.uploadImg, imgFormData).then(function (data) {//这里的this.uploadImg是接口地址，imgFormData是刚才创建的formData对象，也是我们要传入的参数对象
          if($event.target.offsetParent.className === 'head-img'|| $event.target.offsetParent.className ==='modify-head-btn-outer'){
            databack.photoUrl = data.body.formdata.url+"?imageView&crop=0_2_390_390";//在获取到的图片地址后面添加了这样几个参数，crop的作用是按照规定尺寸进行裁剪，390是我们指定的宽度
            this. headImg = databack.photoUrl;
            this.sendHeadImg(databack.photoUrl);
          }else if($event.target.offsetParent.className === 'infor-img-left'){
            this.wordCard = data.body.formdata.url;
          }else if($event.target.offsetParent.className === 'infor-img-right'){
            this.identityCard = data.body.formdata.url;
          }
        },function(err) {
          console.log(err)
        });

上述代码中做了三个判断是因为页面中有三个地方用到了图片上传，这里写的是一个公用方法，所以通过判断来区分元素。下面看一下formData对象的浏览器兼容性：

huandie2012 / blog

用FormData对象实现图片上传 #10