response-images-uploader: получить имя файла или URL загруженного изображения обратно в форму реакции

Question

Я нашел простой загрузчик изображений в реакции. Пакет загружает файл в простой клик. Есть ли способ получить URL загруженного файла обратно в форму, чтобы я мог вставить URL-адрес изображения в таблицу с идентификатором пользователя

реагировать загрузчик изображений

код на стороне сервера

app.post('/multiple', upload.array('file'), function (req, res) {
const photos = req.files;
let data = [];
photos.map(p => data.push({
  name: `${API_URL}/uploads/${p.filename}`,
  orginal_name: `${p.originalname}`
}));
res.send({
  status: true,
  message: 'Photos are uploaded.',
  data: data
});
});

Я пытаюсь использовать multer в узле. но будет ли это работать с этим пакетом. Как я должен получить «файл», потому что здесь нет inpupt с именем файла. спасибо за помощь

Код внешнего интерфейса

 <ImagesUploader
                url="http://localhost:5000/multiple"
                optimisticPreviews
                multiple={true}
                onLoadEnd: function(error: { message: string, ... }, response?: JSON)
                label="Upload a picture"
                />

Он выводит следующую ошибку

  Line 283:36:  Parsing error: Unexpected token

  281 |                 optimisticPreviews
  282 |                 multiple={true}
> 283 |                 onLoadEnd: function(error: { message: string, ... }, response?: JSON)
      |                                    ^
  284 |                 label="Upload a picture"
  285 | 
  286 | 

А также

Access to fetch at 'http://localhost:5000/multiple' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

По мере возникновения ошибки CORS, я не могу проверить ответ, который я получаю

app.use(cors());
app.options('*', cors());

я прокомментировал вторую строку в узле и разрешил только 'http://localhost: 3000 ', но все еще та же ошибка

Answer 1

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

onLoadEnd: function(error: { message: string, ... }, response?: JSON)

Они будут сохранены в 'response'

Код может быть следующим:

Обратный вызов для загрузки (если Вы используете хуки).

const loadEnd = (error, response) => {
  if (!error) {
    const data = JSON.parse(response)
    // Here you can handle your data and save it to state. 
    // And after read it from state in function render().
  }
}

Вы визуализируете свой элемент для загрузки.

<ImagesUploader
  url="http://localhost:5000/multiple"
  optimisticPreviews
  multiple={true}
  onLoadEnd: {loadEnd}
  label="Upload a picture"
  />