图片上传流程

之所以这么做的原因是图片上传比较忙，所以先上传其他的东西，都上传成功之后再上传图片
一般来讲是4步，调用4个接口

1.本地 用fileReader 来预览图片 

  

<form class="form-horizontal" novalidate #studentInfo="ngForm" (ngSubmit)="modifyInfo(studentInfo)">

<img src="{{studentData?.avatar}}" alt="{{studentData.name}}" onerror="javascript:this.src='../../../../assets/images/user.png'" #img/>

<input id="file2" type="file" (change)="upload(fileUpload,img)" #fileUpload/>

</form>

下面的upload 是input type="file"  的事件，先做了一个本地的预览

/**
 * 更改头像
 * @param data
 * @param img
 * @returns {boolean}
 */
upload(data,img) {
  let file = data.files[0];
  let me = this;
  if (!/image\/\w+/.test(file.type)) {
    swal(SettingsService.I18NINFO.swat.e221);
    return false;
  }
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function (e) {
    img.src = this.result;
    me.imgBase64 = this.result;
  }
}

这里的this 指的是FileReader 对象，他是有这个result属性的

2. 在表单提交成功后，获取uuid 
    表单提交的内容并没有图片的信息。是在下面把base64位的图片上传的。

3. 图片和uuid 进行绑定提交到图片服务器
    图片的base64 位地址跟uuid 绑定上传到服务器
4. 上传这个人的 code 和 uuid 到主服务器
     这样才完成了真正的上传图片
     


上面是原生的，还有一个包

ng2-file-upload  

也可以用来文件上传，其步骤也可以按照上面来做，着这样会比较快点。这个包提供了大量的的api，其功能非常的强大。