Блог

Я использую следующий код для загрузки, отображения и отображения источника изображения пользователю:

 import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [file, setFile] = useState(null);

  const handleChange = function loadFile(e) {
    if (e.target.files.length > 0) {
      const file = URL.createObjectURL(e.target.files[0]);
      setFile(file);
    }
  };
  return (
    <div className="App">
      <input type="file" onChange={handleChange} id="upload" accept="image/*" />
      <label htmlFor="upload">
        <div>
          <img alt="uploadImage" src={file} />
        </div>
      </label>
    </div>
  );
}
 

Здесь работает песочница.

Проблема

Что я хотел бы сделать, так это разрешить пользователю загружать свое изображение, а затем предоставить им общедоступный URL-адрес изображения, который будет использоваться в качестве источника отображаемого изображения.

С текущим кодом после загрузки изображение source обычно выглядит примерно так: blob:https://fp0tr.csb.app/48a669d9-f9e2-4ea3-811f-c001ac158a1a я знаю, что это результат метода URL.createObjectURL() и ссылается только на локальный файл.

Я попытался сохранить источник изображения в локальном хранилище после загрузки, чтобы сохранить его источник, но это не решение, поскольку изображение будет существовать только локально. — Требуется предоставить функциональность, которая позволит пользователю ссылаться на эти изображения по их источнику вне приложения.

Существует ли метод, который можно использовать для создания общедоступного URL-адреса изображения, который будет существовать дольше, чем срок службы страницы / документа, в который он был загружен?Необходимо ли использовать сторонний сервис для такого типа функциональности?

РЕДАКТИРОВАТЬ: другой пользователь предоставил информацию о возможном использовании веб-службы для достижения этой цели, однако, без особого контекста относительно того, как это может выглядеть, помимо использования fetch API. — Надеюсь, кто-нибудь сможет уточнить.

Вы нигде не загружаете изображение.

Вы просто читаете файл и полностью преобразуете его в URL-адрес данных на клиенте.

Чтобы предоставить общедоступный URL-адрес, вам необходимо фактически загрузить файл (например, с помощью fetch ) в веб-службу, которая хранит файл где-нибудь, чтобы веб-сервер мог его прочитать (и веб-служба может вычислить URL-адрес, который ему предоставит веб-сервер).

Нет необходимости использовать сторонний сервис. Вы можете написать свой собственный.