如何使用Reactjs上传图像

toiithl6 于 2022-12-03 发布在 React

关注(0)|答案(1)|浏览(158)

我在Reactjs工作，我正在使用nextjs框架，我正在尝试用Axios上传图片（post方法api），我将使用“api in php”，我怎么能做到这一点？我尝试了以下代码，但它给我以下错误参数类型'string| null“不能赋给”string“类型的参数|Blob'我尝试使用下面的代码，但给我错误（下面的代码提到）

HTML格式

<input type="file"  
       className="file-upload-default"  
       onChange={handleFileSelect}/>

JavaScript语言

const formData = new FormData();

formData.append("selectedFile", selectedFile);

try {
     const response = await axios({
                                   method: "post",
                                   url: "/api/upload/file",
                                   data: formData,
                                   headers: { "Content-Type": "multipart/form-data" },
                                   });
    } 
    catch(error) {
        console.log(error) 
        // getting error 
        // "Argument of type 'string | null' 
        // is not assignable to parameter 
        // of type 'string | Blob'"
    }  

    const handleFileSelect = (event : any) => {
        setSelectedFile(event.target.files[0])
        // getting error "Cannot find name 'setSelectedFile'"
    }

reactjs

来源：https://stackoverflow.com/questions/74664607/how-to-upload-image-with-reactjs

1条答案

按热度按时间

vlju58qv1#

在catch中遇到的第一个错误是，您没有为selectedFile状态分配类型，因此需要为其添加类型string | Blob
对于第二个，我不确定在哪里定义了selectedFile状态，但似乎handleFileSelect函数不在定义selectedFile的文件中
下面是我所做的，我希望它能有所帮助：

const [selectedFile, setSelectedFile] = useState<string | Blob>('');
  const handleFileUpload = async () => {
    const formData = new FormData();
    formData.append('selectedFile', selectedFile);
    try {
      const response = await axios({
        method: 'post',
        url: '/api/upload/file',
        data: formData,
        headers: { 'Content-Type': 'multipart/form-data' },
      });
    } catch (error) {
      console.log(error);
    }
  };

  const handleFileSelect = (event: any) => {
    setSelectedFile(event.target.files[0]);
  };

  return (
    <>
      <input type="file" onChange={handleFileSelect} />
      <button onClick={handleFileUpload}>Upload!</button>
    </>)

赞(0）回复(0）举报 2022-12-03

我来回答

如何使用Reactjs上传图像

1条答案

相关问题

热门标签

最新问答