Ionic Upload Error: advanced-http: "params" option needs to be an dictionary style object, <params: {[key: string]: string | string[]}>

Question

在使用以下方法将 camera/image 文件从设备上传到 API 时，我只想使用离子插件 https://github.com/silkimen/cordova-plugin-advanced-http#uploadFile。

同时，根据下面评论的文档，它没有任何语法错误。

问题与参数有关，我不明白为什么...

Error: advanced-http: "params" option needs to be an dictionary style object,

图片上传方法api.

async uploadToAPI(imgEntry) {

    var url = environment.api_host + "/activities/log/images"
    var filePath = imgEntry.localURL;
    var name = 'reports';

    var body = {
        user_hash: 'xxxxxxx',
        activities_id: 1,
        activities_log_id: 1
    }

    var headers = {
        'Authorization': 'Bearer ' + environment.api_security_bearer
    }

    // (method) HTTP.uploadFile(url: string, body: any, headers: any, filePath: string | string[], name: string | string[]): Promise<any>
    // @param url — The url to send the request to
    // @param body — The body of the request
    // @param headers — The headers to set for this request
    // @param filePath — The local path(s) of the file(s) to upload
    // @param name — The name(s) of the parameter to pass the file(s) along as
    // @returns — returns a FileEntry promise that will resolve on success, and reject on failure

    this.http.uploadFile(
        url,
        body,
        headers,
        filePath,
        name,
    ).then((data) => {
        console.log(data)
    })
        .catch(error => {
            console.log(error)
        })
}

在上面的以下代码中，我可能遗漏了什么？

PS：只是，想用ionic-native/http/ngx，没有别的。

import { HTTP } from '@ionic-native/http/ngx';

Answer 1

我向原作者的 github repo 报告，但后来我找到了解决这个问题的方法，并且仍然使用 ionic-native/http/ngx

希望这对其他人也有帮助。

this.http.setDataSerializer('multipart')

formData.set('user_hash', 'xxxxx')
formData.set('activities_id', this.activities_id)

var url = environment.api_host + "/activities/log/images"

this.http.sendRequest(url, {
    method: "post",
    data: formData,
    headers: this.headers,
    timeout: 60,
})
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.log(error);
    });
}

这个有效

params:
{}
body:
[Object: null prototype] {
  user_hash:
   'xxxxxx',
  activities_id: '12' }
files:
[ { fieldname: 'reports',
    originalname: '1590642736754.jpg',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    buffer:
     <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 48 00 48 00 00 ff e1 00 58 45 78 69 66 00 00 4d 4d 00 2a 00 00 00 08 00 02 01 12 00 03 00 00 00 01 00 01 ... >,
    size: 10857214 } ]

Answer 2

我遇到了与上面类似的错误，OP post，它指出“param”出现错误 key:string..

进一步调试后，ionic capacitor-runtime 只检查 value = String |仅数组。我意识到我的 body 包含长值。因此，将值更改为 String，一切正常。

只需为 body 中的 non-string 值添加 String()。如果仍然出错，同样转到 headers。

var body = {
        user_hash: 'xxxxxxx',
        activities_id: String(1),
        activities_log_id: String(1)
    }

Answer 3

我在没有图片上传的情况下遇到同样的问题。我只是通过在 String 中传递 integer 值来解决这个问题。看我的代码

var url =  this.baseurl;
var headers =  { };
var params = { 
  "from_date": from_date,
  "to_date": to_date,
  "limit_start":0,
  "limit":20,
}
this.http2.get(url,params,headers)
.then(data => {
    const responceJSon = JSON.parse(data.data);
})
.catch(data => {
    console.log("server Response in catch : ");
    console.log(data);
});

在这里，我将 "limit_start":0, 替换为 "limit_start":"0", 并将 "limit":20, 替换为 "limit":"20", 并且有效！ .

最终参数：

var params = { 
  "from_date": from_date,
  "to_date": to_date,
  "limit_start":"0",
  "limit":"20",
}

Ionic Upload Error: advanced-http: "params" option needs to be an dictionary style object, <params: {[key: string]: string | string[]}>

Ionic Upload Error: advanced-http: "params" option needs to be an dictionary style object, <params: {[key: string]: string | string[]}>

javascript

cordova

ionic-framework

cordova-plugins

cordova-plugin-advanced-http