最近在前端开发项目中，我使用了一个 npm 包叫做 ember-semantic-ui-file-uploader，它能够方便的实现文件上传功能。这里我分享一下我在使用这个包时的一些心得和体会，希望能够帮助到大家。
ember-semantic-ui-file-uploader 是什么？
我们先来了解一下，什么是 ember-semantic-ui-file-uploader。它是一个基于 Ember.js 和 Semantic UI 的文件上传组件。相对于其他上传组件，使用 ember-semantic-ui-file-uploader 相对来说更加容易使用， UI 也非常清晰美观。
安装和使用
首先，我们需要在项目中安装 ember-semantic-ui-file-uploader。可以使用 npm 进行安装：
npm install ember-semantic-ui-file-uploader --save-dev
安装完成后，我们需要通过 ember-cli 来为这个组件生成一个 component。在 SSH 终端输入以下命令：
ember g semantic-ui-file-uploader <component_name>
上面这个命令的「component_name」是你想要生成的 component 的名称。
生成 component 之后，我们就可以在项目中引用这个组件了。例如，在一个表单中添加上传文件功能可以这样实现：
{{#semantic-ui-form onsubmit=(action "submitForm") as |form|}}
{{form.field "avatar" label="Avatar" required=true controlClass="fluid-focus-border" controlComponent=(component "semantic-ui-file-uploader" endpoint=endpoints.avatarEndpoint)}}
{{/semantic-ui-form}}上面这个代码中，我们使用了一个 semantic-ui-file-uploader 的 component 来构建一个上传文件的表单项，其中的 endpoint 可以指定上传文件到的地址。
经过上面的步骤之后，我们就已经成功的添加了一个上传文件组件到我们的表单中了！
总结
总的说来，使用 ember-semantic-ui-file-uploader 来实现文件上传非常的方便。它的 API 设计非常的人性化，而且还提供了丰富的 UI 风格选择。在实现文件上传的功能时，它也非常的快速。希望大家在使用它的时候，能够有更好的体验！
示例代码
{{#semantic-ui-form onsubmit=(action "submitForm") as |form|}}
{{form.field "avatar" label="Avatar" required=true controlClass="fluid-focus-border" controlComponent=(component "semantic-ui-file-uploader" endpoint=endpoints.avatarEndpoint)}}
{{/semantic-ui-form}}来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ca781e8991b448da0c5