如何在上传前更改输入文件名

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}` });

希望这可以帮助！