时间戳

首页 > 解决方案 > 将从用户文件上传的 csv 数据添加到 django 模型

reactjs - 将从用户文件上传的 csv 数据添加到 django 模型

问题描述

抱歉，如果这是一个愚蠢的问题，但我找不到一种简单/最新的方法来从用户在前端（React）上更新的 .csv 文件填充 Django 模型。我设法使用 axios 将上传的文件从反应前端发送到后端，我可以在后端捕获文件，但我不知道用 csv 数据填充模型的正确方法......

谢谢！！

应用程序.js

// frontend/src/App.js

import React, { Component } from "react";
import axios from "axios";
import { Button, FormGroup, Form } from "react-bootstrap";

class App extends Component {

  handleFile = (event) => {
    event.preventDefault();

    const fileToUpload = event.target.files[0];
    this.setState({
      fileToUpload: fileToUpload,
    });
  };

  handleSubmitData = (event) => {
    event.preventDefault();

    let formData = new FormData();
    formData.append("file", this.state.fileToUpload);

    axios
      .post("data/", formData)
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.log(error.response);
      });
  };

  render() {
    return (
      <main className="content">
        <h1 className="text-white text-uppercase text-center my-4">
          Price comparison
        </h1>
        <form onSubmit={this.handleSubmitData}>
          <FormGroup>
            <Form.Label>Upload file</Form.Label>
            <Form.Control type="file" onChange={this.handleFile}></Form.Control>
          </FormGroup>

          <Button block bssize="large" type="submit">
            Submit
          </Button>
        </form>
      </main>
    );
  }
}
export default App;

模型.py

from django.db import models    

class Data(models.Model):
    city = models.CharField(max_length=200, null=True)
    wheel_type = models.CharField(max_length=200, null=True)
    order_status = models.CharField(max_length=200, null=True)
    order_ID = models.IntegerField(null=True)
    client_ID = models.IntegerField(null=True)
    placed_time = models.DateTimeField(null=True)
    order_date_time = models.DateTimeField(null=True)
    origination_latitude = models.FloatField(null=True)
    origination_longitude = models.FloatField(null=True)
    destination_latitude = models.FloatField(null=True)
    destination_longitude = models.FloatField(null=True)
    surchage_total = models.FloatField(null=True)
    transaction_value = models.FloatField(null=True)
    total_price = models.FloatField(null=True)

    def __str__(self):
        return self.order_ID

视图.py

from rest_framework.response import Response
from rest_framework.parsers import MultiPartParser, FormParser

class RegisterData(views.APIView):
    parser_classes = (FormParser, MultiPartParser)

    def post(self, request):
        for file in request.FILES.values():
            print(file)

        return Response({"success": "Good job, buddy"})

标签： reactjsdjangocsvdjango-modelsdjango-rest-framework

解决方案

您可能想看看批量创建方法：https ://books.agiliq.com/projects/django-orm-cookbook/en/latest/multiple_objects.html

# not sure about the right import
from .models import Data

class RegisterData(views.APIView):
    parser_classes = (FormParser, MultiPartParser)

    def post(self, request):
        for file in request.FILES.values():
            reader = csv.reader(file)
            objects = []
            for row in reader:
                objects.append(Data(
                  city=row[0],
                  wheel_type=row[1],
                  # and so on ..
                ))
            Data.objects.bulk_create(objects)

        return Response({"success": "Good job, buddy"})

您可以使用 pandas 变得更高级 - 如果您的 CSV 的第一行恰好是与模型上的字段值相同的标题行，但我不建议仅仅为此而依赖 pandas。

推荐阅读