第七次迭代开发总结(AngularJS下文件上传的实现)

第七次迭代开发总结

突然之间冒出来一个第七次迭代总结看上去挺奇怪的，事实上因为学校项目的关系，我暑假留校继续开发。在迭代的前半周期，团队进行了一次技术迁移，舍弃LiveScript转向了ECMAScript 6。有空的话会写一些ECMAScript 6的学习笔记。
这次开发我主要负责两个模块，一个主要从数据库中读取数据，另一个则是实现文件上传的功能。值得注意的是，因为采用的是My SQL, Express, Angular JS和NodeJS的MEAN（和普通的MongoDB MEAN不一样，不过其实我不太懂为什么不用My SQL这样的关系型数据库，因为感觉快一些啊）。团队里面的人都没有在AngularJS下实现过文件上传，其实我是挺方的。

AngularJS下文件上传的实现

在写之前我主要是在Stack Overflow上找到了File Upload using AngularJS这个问题，里面提到了两个比较好的插件angular-upload和ng-file-upload,我看了他们的效果和实现的原理，其实也是使用FormData来实现的，所以我就觉得其实自己写一个也是可以的。

jade:
form(enctype='multipart/form-data')
  input(type="file" name='file')

ECMAScript 6:
let formData = new FormData($('form')[0]);

      $.ajax({
        url: `\api`,
        type: 'POST',
        data: formData,
        cache: false,
        processData: false,
        contentType: false,
        success: (data, textStatus)=> {

          alert('Upload Successfully');

        },
        error: (err) => {

          alert('Fail to upload, please upload file again');

        }
      });

其实实现的时候并不难，可是因为一直无法插入到表中所以调试了很久。后来才发现其实是API要求的数据应该放在formData而不是请求的params, body等地方的。这个坑有点大。
其实AngularJS本身的$http模块可以实现文件上传功能的，这个在以后会改，可是其实ajax和$http底层实现其实是一样的，所以不会差很多。

异步函数中对页面DOM元素的改变如何生效？

同样是文件上传页面，异步获取文件名并显示在页面和成功上传后页面的另一模块显示都诡异地不能通过$scope这样来实现，如下：

ECMAScript 6
success: (data, textStatus)=> {


          alert('Upload Successfully');

          $('.feedback').addClass('choose');

          $scope.selectedTab = 'feedback';


}

代码是上文Ajax请求成功以后的回调函数，事实上这样执行的效果就是feedback这个类选择器对应的元素会变化可是$scope.selectedTab这个值并不会改变。这个在获取文件名并显示上同样存在。请教过师兄加了一行迷之代码以后就可以了。

$scope.$apply();

这个是在赋值完成以后再次对页面DOM元素进行更新。。。。我看的书都不知道去哪里了。。

这次迭代看出了我自己的缺点同时也让我觉得如果你问的问题不是很白痴的话其实别人是很愿意教你的。不过不知道为什么总会有人觉得我有点伸手党？看来做法上还是有点问题，以后要学习一下如何查找资料。

如有问题欢迎发邮件到kcnnow(at)gmail.com一起讨论，如需转载，请注明出处。