无法使用 reactjs 和 typescript 将图像推送到 API

编程问答 2022-04-25

问题描述

我正在尝试使用 rectjs 将带有图像的数据发布到服务器，下面的打字稿是我的模型

export interface Client{
    fullname:string;
    email:string;
    mobile: string;
    regionId: string;
    photo?:Blob;
    alternateNumber?: string;
    address?: string;

}

我在添加组件中使用上述模型

 interface Props {
  clients? : Client
}

export default function AddClient({clients}: Props) {
  const {regionStore} = useStore()
   

    const initialState = clients ?? {
      fullname:'',email:'',mobile: '',regionId: '',alternateNumber: '',address: '',photo: null
  }

我不知道将 blob 的初始值传递为空但是当我初始化 null 时它抛出错误

类型 'null' 不能分配给类型 'Blob |未定义'

  const [client,setClient] = useState(initialState)

    function handleSubmit(client: Client){
        let formData = new FormData();
        
        formData.append('fullname',client.fullname)
        formData.append('email',client.email)
        formData.append('mobile',client.mobile)
        formData.append('regionId',client.regionId)
        formData.append('photo',client.photo )
        formData.forEach((value,key) => {
          console.log("Values submitted",key+" " +value)
        })
     
  }

但是当我尝试将其附加到 formdata 时，我收到此错误

'Blob 类型的参数 | undefined' 不能分配给参数 输入'字符串|斑点'。类型“未定义”不可分配给类型 '字符串 | Blob'.ts(2345)

这是我使用 formik 和 yup 进行验证的表单

<Formik validationSchema={ClientValidation} initialValues={client} onSubmit={handleSubmit}>
            {({ handleSubmit,isValid,isSubmitting,dirty}) =>(
              <Form className='ui form' onSubmit={handleSubmit} autoComplete='off'>
                 <Form.Group widths='equal'>
                <MyTextInput name="fullname" label="Full Name" placeholder='Full Name'/>
                <MyTextInput name="email" label="Email Address" placeholder='Email Address'/>
                </Form.Group>

                <Form.Group widths='equal'>
                <MyTextInput name="mobile" label="Mobile Number" placeholder='Mobile Number'/>
                <MySelectInput placeholder="regionId" label="Select Region" name="regionId" options={region}/>
                </Form.Group>
                <Form.Group widths='equal'>
                <MyTextInput name="alternateNumber" label="Alternate Number" placeholder='Alternate Number'/>
                <MyTextInput name="photo" label="Upload Images" type='file' placeholder='Upload Image'/>
                <MyTextArea rows={2} placeholder="address" label="Address" name='address' />
                </Form.Group>
                {/* <PhotoUploadWidget/> */}
                <Button
                      disabled={isSubmitting || !isValid || !dirty}
                    size='large'  positive type='submit'  content='Create'/>
              </Form>
            )}

          </Formik>

我的 api 工作正常，只是需要将此文件附加到 formdata 并使用 axios 推送它...

对于使用 asp.net core webapi 的 API，当我使用 swagger 进行测试时，它工作正常

解决方法

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

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

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

formikformikjavascriptreactjsreactjsreactjsreactjsreactjs.nettypescripttypescripttypescript