通常无法将图像从前端发送到云端或后端

Posted 2023-03-25

【中文标题】通常无法将图像从前端发送到云端或后端

【英文标题】：Unable to send image from frontend to cloudinary or the backend in general

【发布时间】：2021-07-08 21:05:34

【问题描述】：

我正在尝试将图像从前端发送到 cloudinary，以用作我的应用中的个人资料图片。请在下面找到执行此操作的代码：

import  StyledInput, StyledLabel from '../FormInputs/styles'
import  useState  from 'react'
import  StyledButton  from '../Button/styles'
import axios from 'axios'

export function FileUploader() 
  const [file, setFile] = useState(null)
  const [image, setImage] = useState(null)
  const [showImage, setShowImage] = useState()

  function handleChange(e) 
    readFile(e.target.files[0])
    setFile(e.target.files[0])
    console.log(e.target.files[0])
  

  function readFile(file) 
    const reader = new FileReader()

    reader.readAsDataURL(file)

    reader.onload = e => setImage(e.target.result)
    reader.onerror = e => console.log(reader.error)

  

  async function handleSubmit(e) 
    e.preventDefault()
    const token = localStorage.getItem('token')

    const data = new FormData()
    if(file) 
      data.append('file', file[0], file[0].name)
    

  const response = await axios(
    method: 'PUT',
    base: 'http://localhost:8000',
    url: '/clients/clientprofile',
    data,
    headers: 
      'Content-Type': 'multipart/form-data',
      'Authorization': `Bearer $token`
    
  )

  console.log(response)
  // setShowImage(response.image)
  

  return (
    <div>
      <form onSubmit=handleSubmit>
        <StyledLabel htmlFor="file">Elegir foto de perfil</StyledLabel>
        <StyledInput
          type="file"
          accept="image/*"
          name="file"
          id="file"
          onChange=handleChange
        />
        <StyledButton type="submit">Enviar Foto</StyledButton>
      </form>
      image && <img src=image  />
    </div>
  )

当我选择图片时，它工作正常，但是，当我点击“上传图片”按钮时，它会出现以下错误：

我正在使用setFile() 定义文件，但是，当我console.log(file) 它返回null

任何帮助将不胜感激。

【参考方案1】：

由于console.log() 是异步的，它正在记录null，因为它在state 有时间更改之前执行，而未定义的问题是由于后端配置错误造成的。