在使用 AngularJS 开发单页应用程序（SPA）时，文件上传是一个常见的需求。然而，由于单页应用程序的特殊性，文件上传存在一些问题，需要我们在实践中逐步解决。
常见问题
文件选择
在传统的 Web 应用程序中，文件上传通常通过 <input type="file"> 元素实现。然而，在单页应用程序中，如果使用传统的元素，页面会因为跳转而刷新，造成用户体验上的不便。
解决方案：使用 ng-file-upload 模块实现无刷新上传。
跨域访问
在单页应用程序中，前端代码通常运行在静态资源服务器中，而 API 服务器则运行在另一个域名下。这就引发了 CORS（跨域资源共享）问题，使得前端无法直接向 API 服务器上传文件。
解决方案：使用后端代理实现跨域上传。
大文件上传
当上传大文件时，前端需要考虑到以下问题：
- 可以分段上传，以免服务器应用程序负载过大。
- 可以使用分段校验和，确保上传的文件正确无误。
- 可以显示上传进度条，提高用户体验。
解决方案：使用 ng-file-upload 模块的 resume 选项实现分段上传，使用 chunked 选项实现分段校验和，使用 ngProgress 模块实现上传进度条。
示例代码
文件选择
<div ngf-select ng-model="file" ngf-multiple="false"
ngf-accept="'image/*'">选择图片</div>跨域访问
-- -------------------- ---- -------
-------------------------------------- ---------------- ------- -
----------------- - ---------- -
---------------
---- ----------------------------
----- -
----- ------------
--
---------------------- -
-----------------------
---
--
---大文件上传
-- -------------------- ---- -------
-------------------------------------- ---------------- ------- ------------------ -
--------------- - -----------------------------------
--------------------------------------------------------------------------------
----------------- - ---------- -
---------------
---- ----------------------------
----- -
----- ------------
--
------- -----
-------- -----
---------- ---- - ---- - --- -- -- -- --- -----
-------------------------- -
---------------------------
-- ------------------ -
------------------ ------- - - -----------------
-- --------------- -
--------------------------------- - ------------ - -----
---
--
---总结
通过使用 ng-file-upload 模块以及后端代理等手段，我们可以克服单页应用程序中的文件上传问题，为用户提供更好的体验。同时，对于大文件上传场景，我们还可以使用分段上传、分段校验和等技术，以确保上传的文件正确无误，并提供上传进度条，让用户了解上传的进度，更加直观。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6457243d968c7c53b09f7039