如何在上傳前更改輸入文件名

Question

我想用我的模式而不是原始名稱更改用戶要上傳的圖像。 我知道 。 最好更改服務器上的文件名。 但由於某些原因，我不能這樣做。

const [getImageFile, setImageFile] = useState([]);

const handleImageFile = e => {
    setImageFile([...getImageFile, e.target.files[0]])
};

感謝您的答復。

Answer 1

這不是一個好習慣，但如果你願意，你可以這樣做

import { useState } from "react";

export default function App() {
  const [getImageFile, setImageFile] = useState([]);

  const handleClick = () => {
    console.log(getImageFile);
    const file = new File(getImageFile, "mynewfile.jpeg");
    console.log(file);
  };

  const handleImageFile = (e) => {
    setImageFile([...getImageFile, e.target.files[0]]);
  };
  return (
    <div className="App">
      <input type="file" onChange={handleImageFile} />
      <button onClick={handleClick}>submit</button>
    </div>
  );
}

如果您檢查日志，您可以看到文件名的變化

Answer 2

你可以嘗試這樣的事情：

var element = document.getElementById('Change with your input id name');
var image = element.files[0];
var blob = image.slice(0, image.size);
newFile = new File([blob], `Here you put the image name that you want`, { type: `${image.type}` });

希望這可以幫助！