Блог

Главная - Вопросы по программированию - Загрузка изображений с использованием данных формы и возврат к интерфейсу в React js

Загрузка изображений с использованием данных формы и возврат к интерфейсу в React js

#javascript #reactjs #nestjs

#javascript #reactjs #nestjs

Вопрос:

Я использую nestjs и react js для создания загрузчика изображений. Для реакции я использую это:

  const props = {
        onChange({ file, fileList }: any) {
            const fd = new FormData();
            fd.append('img', fileList[0].originFileObj);
            fetch('http://localhost:3000/upload', {
                method: 'POST',
                body: fd,
            })
                .then(async response => {
                    const data = await response.json();
                    console.log(data)
                })
                .catch(error => {
                    message.error('There was an error!', error);
                });
        },
        defaultFileList: [

        ],
    };


    return (
        <div>
            <Form
                name="form"
                className="form"
            >
            <Form.Item
                className="upload"
                valuePropName="fileList"
            >
                <Upload {...props}>
                    <Button>Upload</Button>
                </Upload>
            </Form.Item>
            </Form>
        </div>
    );
};

Для NestJS я использую:

 @Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Post('/upload')
  @UseInterceptors(
    FileInterceptor('img', {
      dest: './uploads',
    }),
  )
  uploadFile(@UploadedFile() file) {
    console.log(file, 'file');
  }
}

В console.log(file, 'file'); я получаю:

 {
  fieldname: 'img',
  originalname: 'Full.jpg',
  encoding: '7bit',
  mimetype: 'image/jpeg',
  destination: './uploads',
  filename: '3c45cd07145707ec09235c7bf3954d7f',
  path: 'uploads\3c45cd07145707ec09235c7bf3954d7f',
  size: 60655
}

Вопрос: Какую информацию из объекта выше я должен отправить обратно на интерфейс, а какую сохранить в базе данных?
Примечание: Теперь в uploads папке в приложении NestJS я сохраняю 3c45cd07145707ec09235c7bf3954d7f изображение после загрузки. Насколько я знаю, я должен отправить данные на свой сервер, и сервер должен вернуть действительный файл (изображение).

Кто может помочь?

Ответ №1:

Прежде всего, я предлагаю вам сохранить ваши файлы с исходным расширением, добавленным к уникальному имени файла, например 3c45cd07145707ec09235c7bf3954d7f.jpg . Это связано с тем, что обычно вы хотите обслуживать этот файл статически, не выполняя дополнительную логику. Если вы не сохраните его с расширением, вам придется самостоятельно назначать mimetype при обслуживании файла.

Вы можете добавить расширение к имени файла с помощью пользовательского обратного вызова:

     FileInterceptor('img', {
      dest: './uploads',
      filename: (req: any, file: any, cb: any) => {
        cb(null, `${generateRandomUUID()}${extname(file.originalname)}`);
      },
    })

Это имя файла — все, что вам нужно для доступа ко всем данным об этом файле. Если вы хотите, вы можете сохранить это в базе данных вместе с исходным именем файла, размером, типом mimeType, кодировкой и т. Д.

Будет достаточно, если вы отправите имя файла во внешний интерфейс. Затем интерфейс может выполнить запрос GET /uploads/3c45cd07145707ec09235c7bf3954d7f.jpg , и у него будет свое изображение. Вам нужно либо статически обслуживать uploads каталог, либо вы можете создать конечную точку, например /uploads/:filename , если вы хотите выполнить дополнительную логику перед отправкой файла.

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

1. Ваш ответ действительно помог мне. Один вопрос: если я буду каждый раз сохранять свои изображения в папке uploads на сервере, сколько изображений я смогу сохранить? Это неплохая практика или все в порядке? И почему я должен хранить данные об изображениях If you want, you can store this in the database, along with the original file name, size, mimeType, encoding etc в БД, какова может быть цель?

2. @Asking вы можете хранить столько, сколько есть места на жестком диске. Является ли это плохой практикой, зависит от вашего варианта использования. Если вы собираетесь хранить эти файлы вечно, все в порядке. Если нет, вы можете периодически запускать проверку, чтобы удалить неиспользуемые файлы. Потому что пользователь может загрузить файл, но не использовать его. Цель сохранения этих данных, опять же, зависит от вашего варианта использования. Допустим, у вас есть CMS для загруженных файлов во внешнем интерфейсе. Возможно, вы захотите упорядочить файлы по их размеру. Если это произойдет, проще использовать базу данных вместо файловой системы. Вы также можете сохранить исходные имена файлов для лучшей идентификации.

3. связано с хранением изображения в базе данных. Если я хочу сохранить его в базе данных, какие данные я должен там хранить? Это 3c45cd07145707ec09235c7bf3954d7f.jpg ? И если в ситуации, когда я храню изображения в файловой системе, я должен передавать данные в пользовательский интерфейс, как отправлять изображения в пользовательский интерфейс, если я буду хранить данные в БД без сохранения в файловой системе? Спасибо.

4. @Asking вам нужно сохранить сам файл в файловой системе и обслуживать его оттуда. В дополнение к этому, вы можете сохранить имя файла в базе данных вместе с другими данными о файле. Но это необязательно.