Блог

Главная - Вопросы по программированию - Как импортировать файл, находящийся в том же приложении, что и blob, используя XMLHttpRequest в ReactJS

Как импортировать файл, находящийся в том же приложении, что и blob, используя XMLHttpRequest в ReactJS

#ajax #reactjs #file #import #xmlhttprequest

#ajax #reactjs #файл #импорт #xmlhttprequest

Вопрос:

Я пытаюсь импортировать файл в мое приложение ReactJS, используя XMLHttpRequest. Файл находится в том же приложении, однако ответ всегда не определен. Тип ответа на запрос — ‘blob’. Это соответствующий код:

 var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
targetUrl = require('./test.xlsx');
var oReq = new XMLHttpRequest();    
oReq.open('get',proxyUrl   targetUrl, true);
oReq.responseType = 'blob';
oReq.onload = function () {
    var blob = oReq.response;       
};
oReq.send();

proxyUrl предназначен для предотвращения ошибки CORS, поскольку это ajax-запрос. Будем признательны за любую помощь.

Комментарии:

1. разве вы не должны использовать oReq.onreadystatechage than oReq.onload ?

2. Используете ли вы Create React App? Вы могли бы поместить свой файл в public каталог и просто извлечь из корня: fetch('/test.xlsx')

3. @sthotakura использование onreadystatechange также не имеет значения

Ответ №1:

Найдено решение — необходимо импортировать файл и использовать его в XMLHttpRequest

 import file from './test.xlsx';

componentDidMount() {
    var oReq = new XMLHttpRequest();    
    oReq.open('get', file , true);
    oReq.responseType = 'blob';
    oReq.onload = function () {
        var blob = oReq.response;       
    };
    oReq.send();
}