Question

我正在与另一个API进行通信的API项目中，我的工作是AngularJS

我尝试通过已经适用于其他帖子的API上传文件（图片）并上传到其他帖子（其他帖子不是上传的，仅仅是数据）

我可以上传图片并将其放在formdata中处理，但是当我尝试将其发布时，出现400错误且没有'Access-Control-Allow-Origin'。但是我其他人发布的方法很好用，但是这个麻烦。

我的Ajax发布方法：

apiDataService.postPicture = function(formData, callback) {
    $http({
        method: 'POST',
        url: apiUrl + '/pictures',
        data: formData,
        contentType: false,
        processData: false,
        headers: {
            'Authorization': localStorageService.get('auth')
        }
    }).then(function successCallback(response) {
        // retrieve response data
        callback(response.data);
    }, function errorCallback(response) {
        // an error occured
    });
};

我采用了我的其他发布方法的模式，所以它将起作用...

我的上传功能：

self.addPicture = (image) => {
    var fileInput = document.getElementById('the-file');
    var file = fileInput.files[0];
    var formData = new FormData();
    formData.append('file', file);
    apiDataService.postPicture(formData);
}

我的观点：

<form id="form-id">
    <div class="col-xs-12">
        <span>Image :</span>
        <br/>
        <input id="the-file" type="file" placeholder="Image du Procédé" ng-model="picture.file" class="form-control" />
    </div>
    <div class="col-xs-12">
        <button ng-click="addPicture(image)">Enregistrer image</button>
    </div>
</form>

如果您有任何想法，我不理解我的错误...

Answer 1

这肯定是由于服务器正在使用的CORS选项所致。也许您不允许数据标头之类。

Answer 2

@Nounnoune您可以尝试在我遇到相同问题的标头下面添加内容，因此我在标头下面添加了它，并且像charm一样工作。

'Content-type': 'application/x-www-form-urlencoded; charset=utf-8'

Answer 3

已经有许多Angular.js模块可以执行文件上传。

这两个对旧版浏览器有明确的支持：

1）使用iframe作为后备广告

https://github.com/leon/angular-upload

2）使用FileAPI / Flash作为后备

https://github.com/danialfarid/ng-file-upload

Answer 4

我终于有了一个很好的形式，只有html形式的基本形式，虽然不尽如人意，但可以！只需对其进行优化

在API中上传文件会导致错误400

4 个答案: