使用 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 中删除媒体文件失败