antd的upload组件上传图片至后端项目resource文件夹

本文链接：https://blog.csdn.net/qq_42571665/article/details/121165423

本文详细介绍了如何使用antd的Upload组件配合SpringBoot，实现前端上传图片到后端resource文件夹，并展示上传过程及返回值处理。重点在于API接口调用和文件路径管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

antd的upload组件上传图片至后端项目resource文件夹

前端部分

<Upload name=“logo” action=“http://localhost:9001/api/phonebook/uploadPhoto” listType=“picture”
accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
maxCount={1} {…props}>
<Button icon={}>点击上传

<Form.Item
                    name="photo"
                    label="照片"
                    valuePropName="fileList"
                    getValueFromEvent={normFile}
                    extra="请上传照片"
                >
                    <Upload name="logo" action="http://localhost:9001/api/phonebook/uploadPhoto" listType="picture"
                            accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
                            maxCount={1} {...props}>
                        <Button icon={<UploadOutlined />}>点击上传</Button>
                    </Upload>
                </Form.Item>

accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"，为限制文件格式
maxCount={1} ，为限制文件上传数量，=1时最新的覆盖以前的
name=“logo” ，后端获取的名字
action=“http://localhost:9001/api/phonebook/uploadPhoto” ，为后端api接口

想要获取返回值，查看官方文档里的change函数，info.file.responce获取

后端部分

@RequestMapping("/uploadPhoto")
    @ResponseBody
    public Map<Integer,String> uploadPhoto(@RequestParam("logo") MultipartFile pic) throws IOException {
        /*
         * 编码为字符串*/
        String s = Base64Utils.encodeToString(pic.getBytes());
        System.out.println("s:"+s);

        /* *
         *2.解码成字节数组
         */
        Base64.Decoder decoder = Base64.getDecoder();
        byte[] bytes = decoder.decode(s);
        System.out.println("by:"+s);

        /*
         * 3.字节流转文件
         */
        String d = System.getProperty("user.dir");
        File fileMkdir = new File(d+"\\src\\main\\resources\\img");
        if (!fileMkdir.exists()){
            fileMkdir.mkdir();
        }
        String pathName = fileMkdir.getPath() + "\\" + pic.getOriginalFilename();
        System.out.println("path"+pathName);
        FileOutputStream fos = null;
        try {
            fos = new FileOutputStream(pathName);
            fos.write(bytes);
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (fos != null){
                try {
                    fos.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        HashMap<Integer,String> need = new HashMap<>();
        need.put(0,"img\\"+ pic.getOriginalFilename());
        return need;
    }