将工作ajax调用转换为可观察的角度

Question

我有一个现有的JavaScript应用程序，该应用程序将文档（.pdf，.txt ...）提交给Solr以进行文本提取。我现在正在尝试将该功能转换为Angular-6实现，并在整个可观察的模式中挣扎。以下是工作的JS代码，然后是我的Angular组件和Service .TS文件。我想我很近，但是没有雪茄。

let myReader = new FileReader();
    myReader.onloadend = function() {
        fileAsBlob = myReader.result;
        sendToSolr(fileAsBlob); 
    };
    fileAsBlob = myReader.readAsArrayBuffer(file);
    /* Get the unique Id for the doc and append to the extract url*/
    let docId = $("#post_docId").val();
    let extractUrl = "http://localhost:8983/solr/" + core + "/update/extract/?commit=true&literal.id=" + docId;

    /* Ajax call to Solr/Tika to extract text from pdf and index it */
    function sendToSolr(fileAsBlob) {
        $.ajax({ 
            url: extractUrl,
            type: 'POST',
            data: fileAsBlob,
            cache: false,
            jsonp: 'json.wrf',
            processData: false,
            contentType: false, 
            echoParams: "all",
            success: function(data, status) {
                //console.log("Ajax.post successful, status: " + data.responseHeader.status + "t status text: " + status);
                //console.log("debug");
                getDocument(docId);
            },
            error: function(data, status) {
                //console.log("Ajax.post error, status: " + data.status + "t status text:" + data.statusText);
            },
            done: function(data, status) {
                //console.log("Ajax.post Done");
            },
        });
    }

上面的所有操作都是使用fileReader将本地文件读取到阵列式扣子中，并通过AJAX调用将ArrayBuffer提交给Solr。在我的成功中，我确实调用了另一个功能（getDocument），该功能仅查询solr（通过DOCID）对我刚提交并显示的文档。不漂亮，但它起作用。

对于Angular版本，我有以下服务：

constructor(private http: HttpClient) { }
postDocToSolr(fileAsBlob: any): Observable<any> {
    let httpHeaders = new HttpHeaders()
    .set('type' , 'POST')
    .set('jsonp', 'json.wrf')
    .set('processData', 'false')
    .set('echoParams', 'all')
    .set('Content-Type', 'application/x-www-form-urlencoded')
    .set('charset', 'utf-8')
    .set('data', fileAsBlob);
    let options = {
        headers: httpHeaders
    };


    return this.http.post(this.extractUrl, fileAsBlob, options);
}

}

我尝试发布整个服务，但它抛出了格式，因此这是服务的一部分。

，在我的组件中，我调用服务：

    extractText(fileContents: any) {
    console.log("In the Document.extractText() method");
    //this.processDocument(fileContents);
    this.textExtractor.postDocToSolr(fileContents)
    .subscribe(data => {
        console.log("Debug");
        console.log("Data: ") + data;
    },
    error => {
        console.log("Error" + error);
    }
    );
    console.log("Debug");
}

请注意，我已经完成了FileReader，并且正在基本上提交相同的ArrayBuffer。

唯一的提示是在可观察到的错误=>记录错误回调（右任期？）中的提示。我收到错误代码400，不错的请求，带有消息：" msg"：" urldecoder：逃生（％）模式中的无效数字（p）"这对我没有太大帮助。我想知道这是否是一个编码问题（UTF-8），但不确定从哪里开始。会欣赏正确方向的推动。

Answer 1

看来问题是Angular如何编码您的URI，我将打开您选择的网络工具（网络选项卡，提示器等），并查看每个网络的发送请求URI。我怀疑他们会与众不同。

Answer 2

好吧，通常是小事会让我兴奋。我需要将内容类型设置为" false"，一切正常。我还重新划分了Httpheaders的创建，但我认为无论哪种方式都可以奏效。工作后服务方法是：

export class TextExtractorServiceService {
extractUrl: string = "http://localhost:8983/solr/tater/update/extract/?commit=true&literal.id=778";
constructor(private http: HttpClient) { }
postDocToSolr(fileAsBlob: any): Observable<any> {
    const httpOptions = {
        headers: new HttpHeaders({
            "jsonp": "json.wrf",
            "processData": "false",
            "echoParams" : "all",
            "Content-Type": "false",
            "cache": "false"
        })
    };
    return this.http.post(this.extractUrl, fileAsBlob, httpOptions);
}

}

感谢所有观看的人。