如何使用附加字段 react.js flask 上传多个文件

Question

我正在尝试使用 react.js 和 python(flask) 上传文件及其附加字段。用户可以上传多个文件。

为了添加更多功能，我将名称和文件推送到一个数组中，该数组存储在组件的状态中，如下所示。

this.state = {
   files:[{name:'', file:''}]
}

并且我在flask中创建了一个restapi来上传文件和保存数据。并将 this.state 数据作为 formData() 传递。我正在尝试像下面这样在烧瓶中上传文件。

let formData = this.state; 
    const fd = new FormData(); 
    for(let k in formData){
        fd.append(k,formData[k]);
    };

休息API-

@mod_upload.route('/upload',methods=['POST'])
def upload():
        if request.method == 'POST': 
                f = request.files['files']
                print(f)

一切正常，但在上面的代码中，f 始终为空，因为在 formData() 中，我附加了 this.state.files，它是一个数组，但它需要文件对象。

所以，我需要建议，如何访问 request.files['files'] 中的文件和字段值。

请帮助我。谢谢

Answer 1

试试这个。在附加表单数据时注意 'files' 键。让我知道它是否有效

更新的答案

let formData = this.state; 
    const fd = new FormData(); 
    for(const k of formData){
        fd.append('files',k.file, k.name);
    };

Answer 2

您没有发送文件值，因此 requests.files['files'] 将为空。

fd.append("file", files[0]); // replace files[0] with your file
fd.append("name", "tmp");

现在您会看到 requests.files['file'] 已填满您的文件， request.form 填充了 'name' 键及其值。

注意填的不是键名requests.files，是根据它的值来填的（应该是文件对象）

您可以为 file1 元数据创建类似 name1 的结构，为 file2 元数据创建类似 name2 的结构。

如何使用附加字段 react.js flask 上传多个文件

How to upload multiple files with additional field react.js flask

python

multipartform-data

form-data

flask

reactjs