如何将给定的curl命令复制为jquery ajax请求？

I have the following example of a REST API call -

我有以下REST API调用示例 -

curl -u "{username}":"{password}" -X POST \
-F "images_file=@test.jpg" \
"https://gateway.watsonplatform.net/visual-recognition-beta/api/v2/classify?version=2015-12-02"

I want to perform the above call as a standard ajax request. This is what I have so far -

我想将上述调用作为标准的ajax请求执行。这是我到目前为止 -

cropper.getCroppedCanvas().toBlob(function(blob){
        var uploadData = new FormData();
        uploadData.append('images_file',blob);

        $.ajax('https://gateway.watsonplatform.net/visual-recognition-beta/api/v2/classify?version=2015-12-02', {
        method: "POST",
        data: uploadData,
        processData: false,
        contentType: false,
        beforeSend: function (xhr) {
            xhr.setRequestHeader('Authorization', 'Basic ODdlOTTZIeg==');
        },
        success: function (data) {
            console.log('Upload success');
            console.log(data);
        },
        error: function (data) {
            console.log('Upload error');
            console.log(data);
        }

    })

    })

I get an error as -

我得到一个错误 -

"{"code":400,"error":"Could not classify. Verify that valid images were uploaded."}"

My hunch is that cURL's -F image_results=@test.jpg is not being simulated correctly in the above ajax call.

我的预感是在上面的ajax调用中没有正确模拟cURL的-F image_results=@test.jpg。

cropper.getCroppedCanvas() is a function call from cropperjs library.

cropper.getCroppedCanvas()是来自cropperjs库的函数调用。

1 个解决方案

#1

Use formData with blob like this:

像这样使用带有blob的formData:

formdata.append("myfile", myBlob, "filename.txt");

See Document

When using the append() method it is possible to use the third optional parameter to pass a filename inside the Content-Disposition header that is sent to the server. When no filename is specified (or the parameter isn't supported), the name "blob" is used.

使用append()方法时,可以使用第三个可选参数在发送到服务器的Content-Disposition标头内传递文件名。如果未指定文件名(或不支持该参数),则使用名称“blob”。

So, for your case:

所以,对于你的情况:

cropper.getCroppedCanvas().toBlob(function(blob){

    var uploadData = new FormData();

    var filename = "your-file-name-with-suffix";
    uploadData.append('images_file',blob,filename);

    //$.ajax(...);
});

#1