将用户给定的图像发送到React中的Api

问题描述

我正在尝试将图像作为输入，并将其作为formData发送到api。

我的代码->

用于用户输入->

            <input
              type="file"
              accept="image/*"
              name="image-upload"
              id="SelectFile"
              onChange={this.imageHandler}
              style={{ display: 'none' }}
            />

imageHandler函数->

  imageHandler = (e) => {
    console.log(e.target.files[0])
    const reader = new FileReader();
    reader.onloadend = function(){
      const dataURL = reader.result;
      let output = document.getElementById('input');
      output.src = dataURL;
    };
    reader.readAsDataURL(e.target.files[0]);

    let form_data = new FormData();
    form_data.append('image',e.target.files[0]);
    saveImage(form_data,this.state.userDetail.email).then(res=>{
      if(res.success){
        this.setState({
          showAlert: true,alertMessage: 'Image Saved',alertType: 'success',});
      }
    })
  }; 

saveImage函数调用api->

export const saveImage = async (data,email) => {
  try {
    const response = await axios.post(`${commonApi.api}/user-image`,data,{
      headers: {
        'content-type': 'multipart/form-data','Authorization': localStorage.getItem('token')
      },params:{
        userEmail: email
      }
    });
    if (response.data.success) {
      return { success: true,message: '',data: response.data.payload };
    } else {
      return { success: false,message: response.data.message };
    }
  } catch (error) {
    console.log('response',error.response.data)
    return { success: false,message: 'Failed' };
  }
};

因此，这引发了403错误。 但是，当我和邮递员一起检查时，它工作正常。

邮递员请求图片-> https://ibb.co/HBxLWhn 因此，我认为我处理的图像不正确。 我在这里犯了什么错误？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）