Input Fetch

2024年10月17日

柏拉文

越努力，越幸运

一、认识

二、实现

<div>
    <input type="file" id="input-file" accept="image/*">
</div>
<script src="./index.js"></script>

const socket = new WebSocket("ws://localhost:3000");
const inputFileEl = document.getElementById("input-file");

socket.addEventListener("open", () => {
  console.log("WebSocket Connection opened");
});

socket.addEventListener("close", () => {
  console.log("WebSocket Connection closed");
});

socket.addEventListener("message", (event) => {
  console.log("WebSocket received from server:", event.data);
});

async function uploadFileForFile(file) {
  const formData = new FormData();
  formData.append("file", file);

  const response = await fetch("http://localhost:3000/upload", {
    method: "POST",
    body: formData,
  });
  const data = await response.json();
  console.log("File uploaded by file:", data);
}

async function uploadFileForBuffer(buffer) {
  const response = await fetch("http://localhost:3000/upload", {
    method: "POST",
    body: buffer,
    headers: {
      "Content-Type": "application/octet-stream",
    },
  });
  const data = await response.json();
  console.log("File uploaded by buffer:", data);
}

async function uploadFileForBase64(base64) {
  const formData = new FormData();
  formData.append("base64", base64);

  const response = await fetch("http://localhost:3000/upload", {
    method: "POST",
    body: formData,
  });
  const data = await response.json();
  console.log("File uploaded by base64:", data);
}

inputFileEl.addEventListener("change", async (event) => {
  const file = event.target.files[0];
  const buffer = new Uint8Array(await file.arrayBuffer());
  socket.send(buffer);
});

inputFileEl.addEventListener("change", (event) => {
  const file = event.target.files[0];
  uploadFileForFile(file);
});

inputFileEl.addEventListener("change", async (event) => {
  const file = event.target.files[0];
  const buffer = new Uint8Array(await file.arrayBuffer());
  const blob = new Blob([buffer]);
  uploadFileForFile(blob);
});

inputFileEl.addEventListener("change", async (event) => {
  const file = event.target.files[0];
  const buffer = new Uint8Array(await file.arrayBuffer());
  uploadFileForBuffer(buffer);
});

inputFileEl.addEventListener("change", (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = async (event) => {
    const base64 = event.target.result;
    uploadFileForBase64(base64);
  };

  reader.readAsDataURL(file);
});

一、认识​

二、实现​

一、认识

二、实现