文件对象 - 重命名状态下的文件名反应答案

【问题标题】：File Object - Renaming a file name in a state react文件对象 - 重命名状态下的文件名反应
【发布时间】：2021-06-18 06:12:12
【问题描述】：

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

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 (Australian Eastern Standard Time), webkitRelativePath: "", size: 74957, ...}

改名后： {名称：“test2-CoverImage.JPG”}

【问题讨论】：

标签： javascript reactjs file

【解决方案1】：

所有文件属性都是只读属性。所以你不能更新那些使用spread operator或Object.assign的。

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

Demo on 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);
        }
      );
    }

【讨论】：

this.setState( {images: {iconImage: { ...this.state.iconImage, name: ${this.state.name}-${this.state.images.iconImage.name} } } }, this.setImageName);
这是...this.state.images.iconImage 而不是...this.state.iconImage
` this.setState( {images: {iconImage: { ...this.state.images.iconImage, name: ${this.state.name}-${this.state.images.iconImage.name}, } } }, this.setImageName); `
是的，我现在明白这意味着什么，但是即使使用扩展运算符，它仍然会重置状态内部的对象。生病尝试只添加一个不在状态内的新本地对象，看看它是否会工作。

【解决方案2】：

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

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

这是我在here 中找到答案的网站链接。这比尝试再次设置状态要简单得多！

【讨论】：

是的，我也检查过。你的方法是实现这一目标的唯一方法。
我也更新了我的答案。很高兴知道一些新的东西！