使用Ember addon ember-plupload上传照片

时间:2016-01-18 12:14:59

标签: javascript ajax ember.js plupload ic-ajax

我已经使用ember-plupload来上传图片。现在我已经为此编写了一个组件。我可以打开并从我的机器中选择图像。但是我不知道接下来要做什么。我必须发送使用body params {photo_file:image file}向我的服务器端点发布请求。我的代码如下。

component.hbs

{{#pl-uploader extensions="jpg jpeg png gif" for="upload-image" onfileadd="uploadImage" as |queue features|}}
  <div class="dropzone" id={{dropzone.id}}>
    <a id="upload-image">Add an Image.</a>
  </div>
{{/pl-uploader}}

component.js

actions:{
        uploadImage:function(file){
        console.log(file)
        let filename = file.get('name');
        file.read().then(function (url) {
         console.log(filename)
         console.log(url)
        }
      }

我能够获取文件名并编码base64值。但不知道如何将请求发送到服务器端点。

http://example.com/api/addphoto and it require body with parameter photo_file and choosed file.

我能够从邮递员应用程序发出正确的请求。在请求正文中,我正在选择文件选项,它直接让我选择从那里选择一个文件。请求成功并且照片当我选择图像并发送请求时,会添加到端点

我应该如何在我的应用中执行此操作?

1 个答案:

答案 0 :(得分:0)

您可以使用XMLHttpRequest

           <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>2.6</version>
                <configuration>
                    <warSourceDirectory>src/main/webapp</warSourceDirectory>
                    <warName>kamienica</warName>
                    <failOnMissingWebXml>false</failOnMissingWebXml>
                </configuration>
            </plugin>