reactjs 尝试从文件输入中选择一个.csv文件并将其传递到后端，然后使用混音运行从后端读取它

我正在尝试使用文件输入选择包含一些列和数据的CSV文件。这是CSV的内容
id,level,cvss,title,Vulnerability,Solution,reference, 963,LOW,7.8,Title - 963,Vulnerability - 963,Solution - 963,reference - 963, 964,CRITICAL,4.6,Title - 964,Vulnerability - 964,Solution - 964,reference - 964, 965,INFO,0,Title - 965,Vulnerability - 965,Solution - 965,reference - 965, 966,CRITICAL,10,Title - 966,Vulnerability - 966,Solution - 966,reference - 966, 967,HIGH,7.5,Title - 967,Vulnerability - 967,Solution - 967,reference - 967, 968,HIGH,5,Title - 968,Vulnerability - 968,Solution - 968,reference - 968, 969,MEDIUM,7.5,Title - 969,Vulnerability - 969,Solution - 969,reference - 969,
这是UI的代码

import { Form } from "@remix-run/react";
import type { ActionArgs, UploadHandler } from "@remix-run/server-runtime";
import {
  composeUploadHandlers,
  parseMultipartFormData,
} from "@remix-run/server-runtime/dist/formData";
import { createMemoryUploadHandler } from "@remix-run/server-runtime/dist/upload/memoryUploadHandler";
import { csvUploadHandler } from "~/models/code.server";

export async function action({ request, params }: ActionArgs) {
  const uploadHandler: UploadHandler = composeUploadHandlers(
    csvUploadHandler,
    createMemoryUploadHandler()
  );

  const formData = await parseMultipartFormData(request, uploadHandler);
  const selected_csv = formData.get("selected_csv");
  console.log("========== selected csv file: ", selected_csv);
  return selected_csv;
}

export default function codeListImport() {
  return (
    <div style={{ textAlign: "center" }}>
      <h1 style={{ marginBottom: 10 }}>UPDATE CODE LIST</h1>
      <Form method="post" encType="multipart/form-data">
        <input
          type="file"
          accept=".csv"
          name="selected_csv"
        />
        <button type="submit" className="btn btn-sm">
          UPLOAD CSV
        </button>
      </Form>
    </div>
  );
}

这是代码.server.ts文件

export const csvUploadHandler: UploadHandler = async ({
  name,
  filename,
  data,
  contentType,
}) => {
  if (name !== "selected_csv") {
    return undefined;
  }

  console.log("===== file name", filename);
  console.log("===== data", data);
  console.log("===== content type", contentType);
};

我尝试使用uploadHandler提供的data获取CSV文件的内容。我获得了HTML输入元素的正确名称、文件名以及内容类型。但当我控制台日志data时，它在日志上显示了以下内容：

我显然不明白的是如何解码这个物体

我已经看了很多教程和很多stackoverflow的帖子，但是我仍然很难理解Symbol.asyncIterator到底是什么，我是一个ES6的新手，请帮助我解决这个问题

在UploadHandler中，参数类型为UploadHandlerPart

export type UploadHandlerPart = {
  name: string;
  filename?: string;
  contentType: string;
  data: AsyncIterable<Uint8Array>;
};

所以data不是CSV字符串，它是AsyncIterable字节，你需要把它转换成一个字符串，然后从你的处理程序返回。

export const csvUploadHandler: UploadHandler = async ({
  name,
  filename,
  data,
  contentType,
}) => {
  if (name !== 'selected_csv') {
    return undefined;
  }
  // get data in chunks
  let chunks = [];
  for await (let chunk of data) {
    chunks.push(chunk);
  }
  // convert chunks to string using Blob()
  return await new Blob(chunks, { type: contentType }).text();
};

我举个例子：https://stackblitz.com/edit/node-ubpgp5?file=app%2Froutes%2Findex.tsx
由于您实际上并没有在csvUploadHandler中执行任何操作，因此您可以简单地使用现有的memoryUploadHandler（）。您的csv文件将作为File类型保存在formData中。

const uploadHandler = createMemoryUploadHandler();
const formData = await parseMultipartFormData(request, uploadHandler);
const csvFile = formData.get('selected_csv') as File;
const csv = await csvFile.text();

reactjs 尝试从文件输入中选择一个.csv文件并将其传递到后端，然后使用混音运行从后端读取它

1条答案

相关问题

热门标签

最新问答