@mantine下拉区域响应图像上传问题，而图像上载在登录表单上

Question

我尝试用这种方式获得带有Dropzone的图像路径{...form.getInputProps("tourImages")}，但它给出了未定义的图像路径。另外，我尝试使用useState钩子获取图像输入，图像路径正在显示，但它没有在表单中显示。请参阅下文：

      const getImage = (imageFile: any) => {
           setImageUpload(imageFile[0].path);
      };
      const [imageUpload, setImageUpload] = useState( );
    
      const form = useForm({
        schema: joiResolver(schema),
        initialValues: {
          name: "",
          sername: "",
          email: "",
          tourImages : "" ,
          imageUpload,
         
        },
      });

 <Dropzone
                    onDrop={(files) => {
                      getImage(files);
                    
                    }}
                    onReject={(files) => console.log("rejected files", files)}
                    maxSize={3 * 1024 ** 2}
                    accept={IMAGE_MIME_TYPE}
                    {...form.getInputProps("tourImages")}
                  >
                    {(status) => dropzoneChildren(status, theme)}
                  </Dropzone>

Answer 1

通过使用onDrop={}方法中的文件参数，您可以上传包含文件参数的文件。此onDrop函数在成功地从用户中选择文件后调用。因此，在文件选择之后，您将能够通过使用Fetch Api上传包含多部分/表单数据请求的文件上传服务器，如下所示。如果您想验证上传url。您应该在onDrop()方法的末尾传递api返回的url字符串以响应状态。

Dropzone的使用示例：

export default function DropzoneExample() {
    return (
        <Dropzone
            multiple={false}
            onDrop={(files) => {
                console.log(files);
                const formData = new FormData();
                formData.append('file', files[0]);
                fetch('http://MY_UPLOAD_SERVER.COM/api/upload', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    body: formData
                }).then(res => {
                    const respJson = res.json();
                    // console.log("File uploaded", respJson);
                    // TODO: Update ui and states....
                    // setUploads(respJson.url);
                    return respJson;
                }).catch(err => {
                    console.log("File upload error", err);
                    // TODO: Update ui and states with error....
                });

            }}
            onReject={(files) => console.log('rejected files', files)}
            accept={IMAGE_MIME_TYPE}
        >
            {(status) => dropzoneChildren(status, theme)}
        </Dropzone>
    );
}

const dropzoneChildren = (status: DropzoneStatus, theme: MantineTheme) => (
    <Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
        <ImageUploadIcon status={status} style={{ color: getIconColor(status, theme) }} size={80} />

        <div>
            <Text size="xl" inline>
                Drag images here or click to select files
            </Text>
            <Text size="sm" color="dimmed" inline mt={7}>
                Attach as many files as you like, each file should not exceed 5mb
            </Text>
        </div>
    </Group>
);