Reactjs 使用cloudinary更改React Dropzone图像上载中的文件名

我正在使用react dropzone和cloudinary进行图像上传

我已经成功连接了我的帐户和我的react项目，我可以通过我的react项目上传图片

在react项目中设置文件名时遇到问题

这是我react项目的代码片段

我已经尝试过这样的方法：

    onImageDrop(files) {
        console.log(files)
        var test = JSON.parse(JSON.stringify(files))
        test[0]["name"] = "test"

        this.handleImageUpload(test);
    }

但是我得到一个错误，说这个文件是只读的

这是我的工作示例

onImageDrop(files) {
        this.handleImageUpload(files[0]);
    }

    handleImageUpload(file) {
        let upload = request.post(CLOUDINARY_UPLOAD_URL)
            .field('upload_preset', CLOUDINARY_UPLOAD_PRESET)
            .field('file', file);

        upload.end((err, response) => {
            if (err) {
                console.error(err);
            }
            console.log(response)
        });
    }

    render() {
        return (
            <div>
                <Dropzone
                    onDrop={this.onImageDrop.bind(this)}cloudinary
                    accept="image/*"
                    multiple={false}>
                    {({ getRootProps, getInputProps }) => {
                        console.log("input props", getInputProps)
                        return (
                            <div
                                {...getRootProps()}
                            >
                                <input {...getInputProps()} />
                                {
                                    <p>Try dropping some files here, or click to select files to upload.</p>
                                }
                            </div>
                        )
                    }}
                </Dropzone>
            </div>
        )
    }

onImageDrop（文件）{
此.handleImageUpload（文件[0]）；
}
handleImageUpload（文件）{
let upload=request.post（CLOUDINARY\u upload\u URL）
.field（'upload\u preset'，CLOUDINARY\u upload\u preset）
.field（'文件'，文件）；
upload.end（（错误，响应）=>{
如果（错误）{
控制台错误（err）；
}
console.log（响应）
});
}
render（）{
返回(
{（{getRootProps，getInputProps}）=>{
log（“输入道具”，getInputProps）
返回(
{
尝试在此处删除一些文件，或单击以选择要上载的文件

}
)
}}
)
}

---

在将文件发送到cloudfire之前，如何更改文件名？

上传时，您可以通过设置公共id在Cloudinary上设置图像名

例如：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class Upload extends React.Component {
  processFile = async e => {
    var file = e.target.files[0];
    var formdata = new FormData();

    formdata.append("file", file);
    formdata.append("cloud_name", "XXXX");
    formdata.append("upload_preset", "XXXX");
    formdata.append("public_id", "my-name1");

    let res = await fetch(
      "https://api.cloudinary.com/v1_1/<Cloud-Name>/auto/upload",
      {
        method: "post",
        mode: "cors",
        body: formdata
      }
    );

    let json = await res.json();
    console.log(JSON.stringify(json.secure_url));
  };

  render() {
    return (
      <div>
        <h3>Upload</h3>
        <input type="file" onChange={this.processFile} />
      </div>
    );
  }
}
ReactDOM.render(<Upload />, document.getElementById("container"));

从“React”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
类上载扩展了React.Component{
processFile=async e=>{
var file=e.target.files[0]；
var formdata=new formdata（）；
formdata.append（“文件”，file）；
formdata.append（“云名称”、“XXXX”）；
formdata.append（“上传预设”、“XXXX”）；
formdata.append（“public_id”，“my-name1”）；
让res=等待取回(
"https://api.cloudinary.com/v1_1//auto/upload",
{
方法：“张贴”，
模式：“cors”，
正文：formdata
}
);
让json=wait res.json（）；
log（JSON.stringify（JSON.secure_url））；
};
render（）{
返回(
上传
);
}
}
render（，document.getElementById（“容器”）；