Реагировать - как разрешить пользователю загружать и заменять файл в каталоге ресурсов? - PullRequest
Новая
       11

Реагировать - как разрешить пользователю загружать и заменять файл в каталоге ресурсов?

0 голосов
/ 16 июня 2020

У меня есть приложение React с таким компонентом: 

export class UploadComponent extends React.Component {
    getFileInput(this: any) {
        this.refs.fileUploader.click();
    }

    onChangeFile(event: any) {
        event.stopPropagation();
        event.preventDefault();
        var file = event.target.files[0];
        // What do I do here to replace a photo in my assets folder?
    }

    render() {
        return (
            <div>
                <input
                    onChange={this.onChangeFile.bind(this)}
                    ref="fileUploader"
                    type="file"
                />
                <input
                    type="button"
                    value="Upload photo"
                    onClick={this.getFileInput.bind(this)}
                />
            </div>
        );
    }
}

В моей папке src у меня есть папка с именем assets с файлом, названным примерно так: photo.png. В своем заявлении я ссылаюсь на photo.png по имени. Я хочу разрешить пользователю загружать фотографию по своему выбору, которая заменит photo.png недавно загруженной фотографией и переименует ее в photo.png, чтобы фотография была заменена везде.

I не обязательно хранить это в базе данных, потому что для этого потребуется получить его из базы данных. Мне было интересно, есть ли решение, которое будет делать это полностью на React. Спасибо за помощь!

Ответы [ 2 ]

1 голос
/ 16 июня 2020

Для выполнения таких операций, как PUT, POST et c, вам потребуется некоторая обработка на «сервере / облаке», чтобы принять запрос и затем выполнить действие, в данном случае сохранение файла.

Без этого есть несколько способов решения описанной вами проблемы:

(Обратите внимание, что эти решения предполагают, что вы не хотите иметь дело с серверы, такие как EC2. Я предполагаю, что вы будете использовать S3 для обслуживания приложения React. Это дешевый и относительно простой способ разместить приложение stati c.)

  1. CloudFront : вы можете настроить Cloudfront для работы в качестве прокси для S3. Затем вы можете просто отправить запрос PUT к тому же префиксу и загрузить файл. ( ссылка 1 , ссылка 2 )
  2. API-шлюз : вы можете просто создать распределение, в котором конечная точка принимает запрос, направляет запрос в функцию Lambda, в которой вы можете выполнять такие операции, как изменение размера, оптимизация и т. д. c, а затем сохранять файл на S3 или там, где вы размещаете приложение. Обратите внимание, что существует ограничение на размер полезной нагрузки для шлюза API, который составляет 10 МБ. ( ссылка )
  3. Amplify - на стороне клиента : с помощью этого вы можете настроить Amplify для доступа на запись в корзину S3 и использования модуля хранения. ( ссылка )

Вышеуказанные параметры находятся в порядке возрастания сложности с точки зрения их настройки и обеспечения безопасности системы.

0 голосов
/ 16 июня 2020

Я ссылаюсь на photo.png по имени. Я хочу разрешить пользователю загружать фотографию по своему выбору, которая заменит photo.png недавно загруженной фотографией и также переименует ее в photo.png, чтобы фотография была заменена везде.

I не обязательно хранить это в базе данных, потому что для этого потребуется получить его из базы данных.

Если вы развертываете бессерверное приложение, вы можете использовать службу хранения, например AWS S3 или Azure Blob Storage.

С серверным приложением вы также можете выбрать вариант выше или использовать api файловой системы, если он поддерживается, и у вас есть на это разрешение, и оно является постоянным.

...