Отправка файла изображения с помощью метода Fetch

Я пытаюсь использовать MathPix API для получения чистого Latex из обработанного изображения в моем Django проекте.

Я использую несколько полей <input type="file"> и слушатель событий на каждом из них. После события change файл проверяется (если это .jpg, .png и т.д.). Далее я использую функцию URL.createObjectURL() для создания url для загруженного файла, не сохраняя его перед этим в db.

function checkExtension(event) {
    var input = event.srcElement;
    var fileName = input.files[0].name;
    var extension = fileName.substr(fileName.lastIndexOf("."));
    var allowedExtensionsRegx = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
    var file = document.getElementById(event.target.name)
    if (allowedExtensionsRegx.test(extension) == true) {
      file.setAttribute("class", "btn-success p-2 rounded")
      const image = input.files[0];
      const image_url = URL.createObjectURL(image)
      snip_request(image_url)
    }
    else {
      file.setAttribute("class", "btn-danger p-2 rounded")
    }
}


function snip_request(image_url){
  if(image_url) {
    const appId = "XXXXXXXXXXXXXXXXX";
    const appKey = "YYYYYYYYYYYYYYYY";
    var url = "https://api.mathpix.com/v3/latex";
    var _data = {
      "src": image_url,
      "formats": "text",
      "data_options": {
        "include_asciimath": true,
        "include_latex": true
      }
    }
    var _header = {
      "content-type": "application/json",
      "app_id": appId,
      "app_key": appKey
    }

    const response = fetch(url, {
    method: "POST",
    body: JSON.stringify(_data),
    headers: _header
  })
  .then(response => response.json())
  .then(json => console.log(json));;

  }
}

К сожалению, в конце дня я получаю сообщение об ошибке:

{
    "error": "blob:http://localhost:8000/4c523864-93ec-452a-ace1-0156b63e9837: TypeError: Only HTTP(S) protocols are supported",
    "error_info": {
        "id": "image_download_error",
        "message": "TypeError: Only HTTP(S) protocols are supported",
        "url": "blob:http://localhost:8000/4c523864-93ec-452a-ace1-0156b63e9837"
    }
}

Я понятия не имею, почему это не работает? Это проблема с "временным URL" или способ загрузки файла сервером? Я довольно новичок в Java Script, поэтому любой совет будет оценен по достоинству.

Ваша проблема не связана напрямую с кодом javascript. Дело в том, что API Mathpix не позволяет напрямую загружать изображения, поэтому они хотят, чтобы вы отправили им ссылку на изображение. Урлы blob: являются только виртуальными урлами в браузере и поэтому доступны только из браузера, а не с серверов Mathpix. Поэтому вам нужно загрузить изображение куда угодно (на свой сервер, в ведро хранения и т.д.) и отправить http:// url на этот файл изображения в API Mathpix.

для локального файла нужны FormData() и input.files[0], опция src предназначена для изображения, хранящегося на сервере.

function checkExtension(event) {
  var input = event.srcElement;
  var fileName = input.files[0].name;
  var extension = fileName.substr(fileName.lastIndexOf("."));
  var allowedExtensionsRegx = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
  var file = document.getElementById(event.target.name)
  if (allowedExtensionsRegx.test(extension) == true) {
    file.setAttribute("class", "btn-success p-2 rounded")
    const image = input.files[0];
    // blob url work only at current browser/tab
    //const image_url = URL.createObjectURL(image)
    snip_request(image)
  } else {
    file.setAttribute("class", "btn-danger p-2 rounded")
  }
}

function snip_request(image) {
  if (image) {
    const appId = "XXXXXXXXXXXXXX";
    const appKey = "YYYYYYYYYYYYY";
    var url = "https://api.mathpix.com/v3/latex";
    // set FormData here
    var _data = new FormData();
    _data.append('file', image);
    _data.append('formats', "text");
    _data.append("data_options", JSON.stringify({
      "include_asciimath": true,
      "include_latex": true
    }));
    /*
    var _data = {
      "src": image_url,
      "formats": "text",
      "data_options": {
        "include_asciimath": true,
        "include_latex": true
      }
    }
    */
    var _header = {
      "content-type": "application/json",
      "app_id": appId,
      "app_key": appKey
    }

    const response = fetch(url, {
        method: "POST",
        body: _data,
        headers: _header
      })
      .then(response => response.json())
      .then(json => console.log(json));
  }
}
Вернуться на верх