使用axios和React将图像上传到Strapi /upload的过程如下:
下面是一个示例代码:
import React, { useState } from 'react';
import axios from 'axios';
const ImageUploader = () => {
const [selectedFile, setSelectedFile] = useState(null);
const handleFileChange = (event) => {
setSelectedFile(event.target.files[0]);
};
const handleSubmit = (event) => {
event.preventDefault();
if (selectedFile) {
const formData = new FormData();
formData.append('files', selectedFile);
axios.post('http://your-strapi-instance.com/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
})
.then((response) => {
console.log('Upload success:', response);
// 处理上传成功的逻辑
})
.catch((error) => {
console.error('Upload error:', error);
// 处理上传失败的逻辑
});
}
};
return (
<form onSubmit={handleSubmit}>
<input type="file" onChange={handleFileChange} />
<button type="submit">上传图像</button>
</form>
);
};
export default ImageUploader;
这个示例代码中,我们使用useState钩子来跟踪用户选择的图像文件。在表单的onSubmit事件处理程序中,我们创建一个FormData对象,并将选中的图像文件附加到FormData中。然后,我们使用axios库发送POST请求到Strapi的/upload路由,并将FormData作为请求的数据。在请求的回调函数中,我们可以处理上传成功或失败的情况。
请注意,示例代码中的URL(http://your-strapi-instance.com/upload)是一个占位符,请将其替换为你自己的Strapi实例的URL。
推荐的腾讯云相关产品:腾讯云对象存储(COS)
注意:本答案中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商,如有需要,请自行查阅相关资料。
领取专属 10元无门槛券
手把手带您无忧上云