[英]trying to select a .csv file from the file input and pass it to the backend and read it from the back end using remix run
我正在嘗試 select 一個 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,
這是用戶界面的代碼
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>
);
}
這是 code.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
獲取uploadHandler
文件的內容。 我得到了 HTML 輸入元素的正確名稱、文件名以及內容類型。 但是當我控制日志data
時,它會在日志中顯示:
我顯然不明白的是如何解碼這個 object
我已經閱讀了多個教程和許多 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 文件將在formData
中作為File
類型。
const uploadHandler = createMemoryUploadHandler();
const formData = await parseMultipartFormData(request, uploadHandler);
const csvFile = formData.get('selected_csv') as File;
const csv = await csvFile.text();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.