使用 cloudinary 更改 React-Dropzone 图像上传中的文件名

Posted

技术标签:

【中文标题】使用 cloudinary 更改 React-Dropzone 图像上传中的文件名【英文标题】:Change file name in React-Dropzone image upload with cloudinary 【发布时间】:2019-09-20 03:49:40 【问题描述】:

我正在使用 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>
        )
    

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

【问题讨论】:

【参考方案1】:

上传时可以通过设置public_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"));

【讨论】:

以上是关于使用 cloudinary 更改 React-Dropzone 图像上传中的文件名的主要内容,如果未能解决你的问题,请参考以下文章

我正在尝试使用 Cloudinary post API 上传图像而不使用 Cloudinary SDK

由于“cloudinary.uploader 未定义”错误,从 cloudinary 中删除媒体文件失败

无法使用 Heroku 将图像上传到 Cloudinary

在 React 中使用 Cloudinary 小部件

cloudinary.exceptions.Error:使用 Flask 的空文件

Express、Multer 和 Cloudinary 未返回完整的 Cloudinary 响应