将工作的Ajax调用转换为Angular Observable

Question

我有一个现有的JavaScript应用程序，该文件向Solr提交文档（.pdf，.txt ...）以进行文本提取。 我现在正在尝试将该功能转换为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将本地文件读入ArrayBuffer，然后通过Ajax调用将该ArrayBuffer提交给Solr。 在我成功的过程中，我确实调用了另一个函数（getDocument），该函数仅查询Solr（按docId）以获取我刚刚提交的文档并显示它。 不漂亮，但是可以用。

对于有角度的版本，我提供以下服务：

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);

}

}

我尝试发布整个服务，但是它取消了格式设置，因此这是该服务的POST部分。

在我的组件中，我将该服务称为：

    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。

唯一的提示是在error =>上在可观察对象上记录错误回调（对吗？）。 我收到错误代码400，错误请求，并显示以下消息：“ msg”：“ URLDecoder：换码（％）模式中的无效数字（P）”对我没有多大帮助。 我想知道这是否是编码问题（UTF-8），但不确定从哪里开始。 希望能朝正确的方向轻推。

Answer 1

看来问题在于URI对您的URI的编码程度如何，我将打开您选择的网络工具（“网络”标签，提琴手等），然后查看每个工具的已发送请求URI。 我怀疑他们会有所不同。

Answer 2

好吧，常常是小事让我绊倒。 我需要将Content-Type设置为“ false”，并且一切正常。 我还重新创建了httpHeaders，但是我认为任何一种方法都行得通。 有效的postToSolr服务方法是：

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);

}

}

感谢所有看过的人。