doushi1929 2019-02-13 21:01
浏览 97

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

I have a Form in ReactJs and I want to submit both data and files to my php API ( Yii2) endpoint. (I do not want to use the raw Input file upload form as I want to have functions like file preview, cropping and most importantly progress bar on file upload)

After doing some research, I came across Uppy which seems to be a great tool to help in this task. I have been going through the docs and other materials for a few days now.

I have written a function to upload files using uppy file uploader following tutorials such as https://uppy.io/docs/react/. My function is very buggy as

  1. I do not even see thumbnails generated from files uploaded, I do not see any information on my DragDrop Component.

  2. I am not able to upload the files to my Yii2 API endpoint. I get the error Reason:

CORS header ‘Access-Control-Allow-Origin’ missing with results such as: Object { successful: [], failed: (1) […], uploadID: "cjs3mua0g0001245zctq3nbqa" }

Here is my code for the uppy function

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>
)

And in my component render function, I call the AvatarPicker class as show

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

Any heads up on this issue, propose solutions, fixes or new Ideas to get around my task is highly appreciated.

  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 MATLAB动图的问题
    • ¥15 求差集那个函数有问题,有无佬可以解决
    • ¥15 【提问】基于Invest的水源涵养
    • ¥20 微信网友居然可以通过vx号找到我绑的手机号
    • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
    • ¥15 解riccati方程组
    • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
    • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
    • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
    • ¥50 树莓派安卓APK系统签名