Использование Uppy для загрузки файлов из ReactJs на сервер PHP (Yii2) - PullRequest
Новая
       15

Использование Uppy для загрузки файлов из ReactJs на сервер PHP (Yii2)

0 голосов
/ 14 февраля 2019

У меня есть форма в ReactJs, и я хочу отправить данные и файлы в мою конечную точку php API (Yii2).(Я не хочу использовать необработанную форму загрузки входного файла, так как хочу иметь такие функции, как предварительный просмотр файла, обрезка и, что наиболее важно, индикатор загрузки файла)

После некоторых исследований я наткнулся на Uppy, который выглядитбыть отличным инструментом, чтобы помочь в этой задаче.Я просматривал документы и другие материалы уже несколько дней.

Я написал функцию для загрузки файлов с помощью загрузчика файлов Uppy, следуя инструкциям, таким как h ttps://uppy.io/docs/react/.Моя функция очень глючная:

  1. Я даже не вижу миниатюр, созданных из загруженных файлов, я не вижу никакой информации о моем компоненте DragDrop.

  2. Я не могу загрузить файлы на мою конечную точку API Yii2.Я получаю сообщение об ошибке Причина:

Отсутствует заголовок CORS «Access-Control-Allow-Origin» с такими результатами, как: Object {success: [], failed: (1)[…], UploadID: "cjs3mua0g0001245zctq3nbqa"}

Вот мой код для функции uppy 

AvatarPicker(currentAvatar ){
  const {user} = this.props
  const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
             username: user.username
        })
    };

  const uppy = Uppy({ autoProceed: true })
      .use(Dashboard, { trigger: '#select-files' })
      .use(GoogleDrive, { target: Dashboard, serverUrl: apiConstants.API_GENERAL_URL+'changeprofilepic' })
      .use(Instagram, { target: Dashboard, serverUrl: apiConstants.API_GENERAL_URL+'changeprofilepic' })
      .use(Webcam, { target: Dashboard })
      .use(Tus, { endpoint:  apiConstants.API_GENERAL_URL+'changeprofilepic?access-token='+user.username, requestOptions })
      .on('complete', (result) => {
        console.log('Upload result:', result)
      })

return (
  <div>
    <img src={currentAvatar} alt="Current Avatar" />
    <DragDrop
      uppy={uppy}
      locale={{
        strings: {
          // Text to show on the droppable area.
          // `%{browse}` is replaced with a link that opens the system file selection dialog.
          dropHereOr: 'Drop here or %{browse}',
          // Used as the label for the link that opens the system file selection dialog.
          browse: 'browse'
        }
      }}
    />
  </div>
)

И в моей функции рендеринга компонента я вызываю класс AvatarPicker как show

{
   this.AvatarPicker('./../images/master.png')
}

Буду очень признателен за любые вопросы по этому вопросу, предложения решений, исправления или новые идеи для решения моей задачи.

...