AngularJS：上传后的照片作为多部分表单数据，并得到响应 [英] AngularJS: upload and post photo as multi-part form data and get response

问题描述

我要上传图片并将其张贴到我的服务器应该进一步张贴在一些API的形象，并得到其响应。

I want to upload an image and post it to my server which should post the image further on to some API and get its response.

我大概可以使用视图的东西，如：

I could probably use view with something like:

<form ng-submit="updatePhoto(myphoto)"> 
    <p>Choose Photo:</p>
    <input type="file" ng-model="myphoto">
    <input type="submit" value="Send">
</form>

，然后在控制器内的功能会碰到这样的：

and then in the controller the function would have something like:

$http({
        method: 'POST',
        url: 'myAPIserver.php/',
        data: "myPhoto=" + photo,
        headers: {'Content-Type': 'multipart/form-data'}
});

但是，这是不正确的，我不知道如何做到这一点。美中不足的是，我先发送照片到我的PHP代理，并从那里我用卷曲进行直接API请求。

But this is not correct and I am not sure how to accomplish this. The catch is that I am sending this photo to my PHP proxy first and from there I use curl to make direct API requests.

我希望我是很清晰。任何建议AP preciated，谢谢

I hope I was clear enough. Any suggestions appreciated, thanks

推荐答案

我设法自定义指令的帮助下，我得到的此处。
您需要进行文件上传自定义的指令，如果要访问文件（ngModel无法正常工作，请参见这获取更多信息）。

I managed to accomplish this with the help of custom directive that I got here. You need a custom directive for file upload if you want to access files (ngModel wont work, see this for more info).

使用第一个链接：

<form ng-submit="updateSth()" name="uploadForm" enctype="multipart/form-data">
    <input name="file" type="file" id="file" file-model="fileToUpload" />
    <input name="somethingINeed" type="submit" value="Upload" />
</form> 

您可以用$ scope.fileToUpload现在，这让一切更容易访问上传的文件。
我从提取的第一个链接中给出的服务功能，并没有把它作为一个服务，因为它更适合我这样...

you can access the uploaded file with $scope.fileToUpload now, which makes everything easier. I extracted the function from the service given on the first link and didn't use it as a service since it suited me better this way …

这篇关于AngularJS：上传后的照片作为多部分表单数据，并得到响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！