使用 Ember 插件 ember-plupload 上传照片
Upload photo using Ember addon ember-plupload
我已经使用 ember-plupload 上传 images.Now 我已经为 this.I 编写了一个组件,我可以打开 select 来自我 machine.But 我不知道该怎么办 next.I 必须使用正文参数将 post 请求发送到我的服务器端点 { photo_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 进行编码value.But 不确定如何将请求发送到服务器端点。
http://example.com/api/addphoto and it require body with parameter photo_file and choosed file.
我能够从 postman app.In 请求正文中提出正确的请求,我正在 selecting 文件选项,它直接让我选择从那里选择一个文件 itself.The 当我 select 一张图片并发送请求
时,请求已成功发出并且照片被添加到端点
我应该如何在我的应用程序中执行此操作?
您可以使用 XMLHttpRequest
uploadImage:function(files){
var file = files[0];
var request = new XMLHttpRequest();
request.open('post', "target url", true);
var formData = new FormData();
var fieldName = 'file';
formData.append(fieldName, file);
request.onreadystatechange = Ember.run.bind(this, function () {
if (request.readyState === 4 && request.status !== 0) {
//success
}
});
request.send(formData);
}
我已经使用 ember-plupload 上传 images.Now 我已经为 this.I 编写了一个组件,我可以打开 select 来自我 machine.But 我不知道该怎么办 next.I 必须使用正文参数将 post 请求发送到我的服务器端点 { photo_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 进行编码value.But 不确定如何将请求发送到服务器端点。
http://example.com/api/addphoto and it require body with parameter photo_file and choosed file.
我能够从 postman app.In 请求正文中提出正确的请求,我正在 selecting 文件选项,它直接让我选择从那里选择一个文件 itself.The 当我 select 一张图片并发送请求
时,请求已成功发出并且照片被添加到端点我应该如何在我的应用程序中执行此操作?
您可以使用 XMLHttpRequest
uploadImage:function(files){
var file = files[0];
var request = new XMLHttpRequest();
request.open('post', "target url", true);
var formData = new FormData();
var fieldName = 'file';
formData.append(fieldName, file);
request.onreadystatechange = Ember.run.bind(this, function () {
if (request.readyState === 4 && request.status !== 0) {
//success
}
});
request.send(formData);
}