文件 Object - 在 state 反应中重命名文件名

Question

当我尝试重命名一个已经在 state 中的文件时遇到了一个问题。我遇到了一个问题，它将替换所有文件信息并添加我更改的名称，当我将它发送到要保存的服务器它不能，因为它只有一个字符串名称而不是文件信息。 这是代码：

constructor(props){
    super(props);
    this.state = {
        images: {
            iconImage: null,
        }
    }
}

onIconChange = (event) => {
    console.log(event.target.files[0]);
    this.setState({images: {iconImage: event.target.files[0]}});
}
onSubmit = (isNew) => {

    if(this.state.images.iconImage){
        this.setState({images: {iconImage: {
            name: `${this.state.name}-${this.state.images.iconImage.name}`
        }}},
        this.sendImage);
    }
    else{
        this.reset();   
    }
}

sendImage = () => {
    const data = new FormData();
    console.log(this.state.images.iconImage);
    data.append('image', this.state.images.iconImage);
    axios({
        url: 'http://127.0.0.1:3002/icon',
        method: 'post',
        data: data,
        body: JSON.stringify({
            vID: this.state.id
        })
    })
    .then(res => console.log(res.data))
    .catch(err => console.error(`error posting image: ${err}`));
    this.reset();
}

更名前：文件 {name: "CoverImage.JPG", lastModified: 1617527811701, lastModifiedDate: Sun Apr 04 2021 19:16:51 GMT+1000（澳大利亚东部标准时间），webkitRelativePath: "", size: 74957, …}

改名后：{name: "test2-CoverImage.JPG"}

Answer 1

所有文件属性都是只读属性。 因此，您也不能使用spread operator或Object.assign更新那些。

但是，您可以使用以下代码重命名文件。

Stackblitz 上的演示

  const myNewFile = new File(
        [this.state.images.iconImage],
        `${this.state.name}-${this.state.images.iconImage.name}`,
        { type: this.state.images.iconImage.type }
      );

      this.setState(
        {
          images: {
            iconImage: myNewFile
          }
        },
        () => {
          console.log(this.state.images);
          console.log(this.state.images.iconImage.name);
          console.log(this.state.images.iconImage.size);
        }
      );
    }

Answer 2

好的，出于某种原因您无法编辑文件名，但是有一个解决方法。 所需要做的就是在新变量中创建一个新文件。 这是我的做法：

const mynewFile = new File([this.state.images.iconImage], 
`${this.state.name}-${this.state.images.iconImage.name}`);

这是我在这里找到答案的网站的链接。 再次尝试设置 state 要简单得多！