Question

我在ReactJs中有一个表单，我想将数据和文件都提交到我的php API（Yii2）端点。（我不想使用原始的Input文件上传表单，因为我希望具有文件预览，裁剪和最重要的文件上传进度栏之类的功能）

做完一些研究后，我遇到了Uppy，它似乎是帮助完成此任务的好工具。我已经阅读了几天的文档和其他材料。

我已经按照h ttps://uppy.io/docs/react/等教程编写了使用uppy文件上传器上传文件的功能。我的功能像

一样非常容易出问题

我什至看不到上传的文件生成的缩略图，我的DragDrop组件上也看不到任何信息。
我无法将文件上传到我的Yii2 API端点。我收到错误原因：

CORS标头“ Access-Control-Allow-Origin”缺失，结果如下如：对象{成功：[]，失败：（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')
}

任何人对此问题提出建议，提出解决方案，解决方案或提出新想法来解决我的任务都将受到高度赞赏。

使用Uppy将文件从ReactJs上传到PHP服务器（Yii2）

0 个答案: