使用 Material UI DropzoneDialogBase 上传文件

Question

我在使用 Material UI DropzoneDialogBase 上传文件时遇到问题；

我的前端是 react 后端是烧瓶

我的组件定义如下

                            <DropzoneDialogBase
                            dialogTitle={addFileClassDialogTitle()}
                            fileObjects={uploadFiles}
                            cancelButtonText={"cancel"}
                            submitButtonText={"submit"}
                            maxFileSize={5000000}
                            filesLimit={1}
                            open={fileClassState.showAddFileClassForm}
                            onAdd={newFile => {
                                console.log('onAdd', newFile);
                                setUploadFiles([].concat( uploadFiles , newFile ));
                            }}
                            onDelete={deleteFile => {
                                console.log('onDelete', deleteFile);
                                const fileList = [...uploadFiles];
                                fileList.splice( deleteFile, 1 );
                                setUploadFiles( fileList );
                            }}
                            onClose={() => setShowAddFileClassForm(false)}
                            onSave={() => saveNewFileClass( )}
                            showPreviews={true}
                            showFileNamesInPreview={true}
                        />

组件工作正常并将文件添加到对象“uploadFiles”

这是我的 saveNewFileClass

    const saveNewFileClass = async () => {
    const credentials = localStorage.getItem("credentials");

    const formData = new FormData();
    formData.append("file", uploadFiles[0]);
    console.log( "type of uploadfiles =>", typeof(uploadFiles[0]));

    for (var key of formData.entries()) {
        console.log(key[0] + ', ' + key[1]);
    }

    formData.append("data", JSON.stringify({ token: credentials, fileclass: newFileClass }));

    console.log('onSave', uploadFiles);
    console.log("save new file class", formData);

    const requestOptions = {
        mode: 'cors',
        cache: 'no-cache',
        headers: { 'Content-Type': 'multipart/form-data' },
        redirect: 'follow',
        referrerPolicy: 'no-referrer'
    };

    const response = await axios.post(
                    'https://myhost.com:5000/api/addfileclass',
                    formData,
                    requestOptions )

    const responseData = await response.data;

    storeCredentials( responseData.credentials );

    setShowAddFileClassForm(false);

}

显示的控制台日志如下

FileClass.js:143 type of uploadfiles => object
FileClass.js:146 file, [object Object]
FileClass.js:151 onSave [{…}]0: {file: File, data: "data:application/vnd.openxmlformats-officedocument…jUHJvcHMvYXBwLnhtbFBLBQYAAAAAEgASANcEAADDUgAAAAA="}length: 1__proto__: Array(0)
FileClass.js:152 save new file class FormData {}

第151行的日志确认uploadFiles有一个Files数组 但是，当我附加到 FormData 'files' 时，它会更改为 [Object Object]

由于在烧瓶后端我没有在 request.files 中获得任何值，并且我收到以下错误

Traceback (most recent call last):
  File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/app.py", line 2464, in __call__
    return self.wsgi_app(environ, start_response)
  File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/app.py", line 2450, in wsgi_app
    response = self.handle_exception(e)
  File "/home/ubuntu/.local/lib/python3.8/site-packages/flask_cors/extension.py", line 161, in wrapped_function
    return cors_after_request(app.make_response(f(*args, **kwargs)))
  File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/app.py", line 1867, in handle_exception
    reraise(exc_type, exc_value, tb)
  File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/_compat.py", line 39, in reraise
    raise value
  File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/app.py", line 2447, in wsgi_app
    response = self.full_dispatch_request()
  File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/app.py", line 1952, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "/home/ubuntu/.local/lib/python3.8/site-packages/flask_cors/extension.py", line 161, in wrapped_function
    return cors_after_request(app.make_response(f(*args, **kwargs)))
  File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/app.py", line 1821, in handle_user_exception
    reraise(exc_type, exc_value, tb)
  File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/_compat.py", line 39, in reraise
    raise value
  File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/app.py", line 1950, in full_dispatch_request
    rv = self.dispatch_request()
  File "/home/ubuntu/.local/lib/python3.8/site-packages/flask/app.py", line 1936, in dispatch_request
    return self.view_functions[rule.endpoint](**req.view_args)
  File "/home/ubuntu/.local/lib/python3.8/site-packages/flask_cors/decorator.py", line 128, in wrapped_function
    resp = make_response(f(*args, **kwargs))
  File "/home/ubuntu/platform-streamxls/react-excel-upload/flaskapp/routes.py", line 286, in addfileclass
    downloadfile = request.files["file"]
  File "/home/ubuntu/.local/lib/python3.8/site-packages/werkzeug/datastructures.py", line 442, in __getitem__
    raise exceptions.BadRequestKeyError(key)
werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
KeyError: 'file'

引发错误的python代码段是

def addfileclass():
    headers = request.headers

    downloadfile = request.files["file"]

任何关于如何修复反应的帮助都会很好

Answer 1

变量uploadFiles是一个对象数组，其结构为data,files

uploadFiles = []{ data : "mime information", file : "the file Object"}

我把append语句改成如下

const formData = new FormData();
formData.append("file", uploadFiles[0].file);

这适用于单个文件

我已经制定了上传多个文件的模式。 我搜索的大多数示例在循环中都有多个 api 调用来上传多个文件；这并不总是一个有效的解决方案

我有多个文件的以下内容

    const formData = new FormData();
    uploadFiles.map((file, idx) => {
        formData.append("file"+idx, file.file);
    });
    formData.append("data", JSON.stringify({ filecount: uploadFiles.length }));

在我的后端 - 我使用文件计数来识别那里的文件数量并使用“file0”、“file1”的值...来处理文件上传