如何解决Reactjs中将数据推入状态数组中的数组
大家好,希望一切顺利
我有一个问题我正在通过 ReactJs 在 Cloudinary 中上传多张图片
这是输入字段
<input
type="file"
className="form-control"
required
onChange={(e) => setimages(e.target.files)}
multiple
/>
OnChange 我将所有文件存储在下面给出的状态
const [images,setimages] = useState([]);
现在我循环状态和上传每个文件到Cloudinary和提取每个图像的URL代码如下
for (const file of images) {
async function upload() {
const formData = new FormData();
formData.append("file",file);
formData.append("upload_preset","DummyPreset"); // Replace the preset name with your own
formData.append("api_key","0300545648961"); // Replace API key with your own Cloudinary key
// Make an AJAX upload request using Axios (replace Cloudinary URL below with your own)
await axios
.post(
"https://api.cloudinary.com/v1_1/Dummycloud/image/upload",formData,{
headers: { "X-Requested-With": "XMLHttpRequest" },}
)
.then((response) => {
const data = response.data;
const fileURL = data.secure_url; // You should store this URL for future references in your app
console.log(fileURL);
});
}
upload();
}
在这里我可以将每个链接提取为 fileURL 并对其进行安慰
console.log(fileURL);
要查看输出请点击链接,它会将您重定向到图像 Outputimage
正如你所看到的,现在所有的 URL 都被提取了,我想将所有提取的 URL 推送到一个数组中,并希望将它们发送到 Express Server,在那里我将它们存储到 DB 中
请让我知道如何将所有 URL 存储到状态数组中,每当提取出的任何 URL 都将存储到该数组中
解决方法
// this function returns a Promise
const uploadFile = (file) => {
const formData = new FormData();
formData.append(stuff);
return axios.post('some/path',formData).then(response => response.data.secure_url);
};
Promise.all(images.map(uploadFile)).then(fileURLs => storeFileURLs(fileURLs))
,
解决办法
感谢您的贡献
var ImagesUrlArray = [];
for (const file of image) {
async function upload() {
const formData = new FormData();
formData.append("file",file);
formData.append("upload_preset","DummyPreset"); // Replace the preset name with your own
formData.append("api_key","0300545648961"); // Replace API key with your own Cloudinary key
// Make an AJAX upload request using Axios (replace Cloudinary URL below with your own)
await axios
.post(
"https://api.cloudinary.com/v1_1/Dummycloud/image/upload",formData,{
headers: { "X-Requested-With": "XMLHttpRequest" },}
).then((response) => {
const data = response.data;
var fileURL = data.secure_url; // You should store this URL for future references in your app
ImagesUrlArray = [...ImagesUrlArray];
ImagesUrlArray.push(fileURL);
if (ImagesUrlArray.length === image.length) {
const res = axios
.post("http://localhost:5000/register",{
fullname: Data.fullname,email: Data.email,pass: Data.pass,cpass: Data.cpass,phone: Data.phone,imagee: ImagesUrlArray,})
.then((response) => response);
setdataa(res);
}
});
}
upload();
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。