javascript - @mantine dropzone 在登录表单上上传图像时 react 图像上传问题

Question

我尝试以这种方式使用 Dropzone 获取图像路径 {...form.getInputProps("tourImages")} 但它给出了 undefined 。另外，我尝试使用 useState Hook 获取图像输入，图像路径正在显示，但它没有显示在表单内部。请参阅以下内容:

      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

使用 Mantine dropzone 提供程序，您可以使用 onDrop={} 方法中的 files 参数上传文件。此 onDrop 函数在用户成功选择文件后调用。因此，选择文件后，您将能够使用 Fetch Api 通过多部分/表单数据请求将文件上传到上传服务器，如下所示。如果你想验证上传网址。您应该在 onDrop() 方法的末尾传递 api 返回的 url 字符串来 react 状态。
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>
);