0

我正在尝试将 Uppy 集成到我的反应应用程序中。根据文档,我只需要在 Tus 对象中定义端点,这将发送我的文件指定的端点。我尝试了相同的方法,但不知道如何在服务器上接收上传的文件以及通过哪个名称(名称属性)获得它。

这是我的代码

import '@uppy/core/dist/style.css'
import '@uppy/drag-drop/dist/style.css'
import Uppy from '@uppy/core';
import Tus from '@uppy/tus';
import { DragDrop, Dashboard } from '@uppy/react';
import ImageEditor from '@uppy/image-editor'
import '@uppy/core/dist/style.css'
import '@uppy/dashboard/dist/style.css'
import '@uppy/image-editor/dist/style.css'
import Webcam from "@uppy/webcam";

const MyComponent = (props) => {

  const uppy = new Uppy({
        meta: { type: 'avatar' },
        restrictions: { maxNumberOfFiles: 1 },
        autoProceed: false,
    })
        .use(ImageEditor, {
            id: 'ImageEditor',
            quality: 0.8,
            cropperOptions: {
                viewMode: 1,
                background: false,
                autoCropArea: 1,
                responsive: true,
                croppedCanvasOptions: {},
            }
        })
    
    uppy.use(Webcam);
    
    uppy.use(Tus, {endpoint: '/api/mediaa/store',
        method: 'post',
        metaFields: ['name'],
        headers: {
            authorization: localStorage.access_token,
        }})
    
    uppy.on('complete', (result) => {
        const url = result.successful[0].uploadURL
        store.dispatch({
            type: 'SET_USER_AVATAR_URL',
            payload: { url },
        })
    })

    return (
        <Dashboard
            plugins={["Webcam", "ImageEditor", "FileInput"]}
            uppy={uppy}
        />
    )

}

我能够选择文件并发送请求,但不能在服务器上接收文件。

4

0 回答 0