Angularjs项目中文件上传

项目后端为Java,基于Spring Boot框架,前端为AngularJS。

前端有两个主要的组件可以用,一个是ng-file-upload,一个是angular-file-upload。

尝试使用ng-file-upload,却不能成功。主要是因为前端使用了Pace,有一些不兼容问题。报错如下:
Failed to execute ‘setRequestHeader’ on ‘XMLHttpRequest’
具体可以参见:https://github.com/danialfarid/ng-file-upload/issues/98

网上有人尝试解决这个问题,但在我的案例里面不适用,也没花时间多研究解决。

使用angular-file-upload则非常顺利,事实上从文档和示例来说,感觉angular-file-upload更加友好易用一些。

 

解决Gulp构建的AngularJS项目中的footable依赖不能自动注入的问题

项目是基于Angular 1.5,构建工具为Gulp。项目文件结构来源于某前端模板的种子项目,与多数AngularJS 的Gulp版本的种子项目大同小异。Gulp的inject任务中已经有了将项目所依赖包的js、css文件自动添加到index.html中的脚本。

现在某页面需要用到footable,于是添加footable依赖:
bower install –save footable

安装后检查,看起来插件已经存在于项目的bower_components目录下了,并且项目的bower.json文件中,也已经自动添加了对footable的依赖,当前版本是3.1.4。

但是运行gulp serve 或者gulp build,均未能在index.html中看到footable的踪影。

小小了解了一下才知道原因:gulp的依赖注入,是调用了wiredep(项目地址:https://github.com/taptapship/wiredep)
而wiredep的工作原理,是根据项目的bower.json文件中所列的依赖,一一处理这些依赖项,处理的时候,会分析该依赖包本身的bower.json文件,根据该文件中的”main”的值来决定要将哪个文件添加到index.html中去。而footable的bower.json文件中,缺失了这一项。

根据wiredep的官方文档,只要在自己项目的bower.json文件中override就可以了。代码如下:

"overrides": {
  "footable": {
    "main": [
      "compiled/footable.js",
      "compiled/footable.bootstrap.css"
    ]
  }
}