表格中download显示图片出现 D:\img\undefined (系统找不到指定的文件。)的错误，如何解决？(语言-java)

在加载页面时进行查询图片数据并将其显示与表格中,经常出现图片加载失败的情况就会报出以下错误,但也有时候图片可以显示
对于upload和download的类我应该是写对了,因为按照教程搬下来的


Closing non transactional SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@214cc23e]
java.io.FileNotFoundException: D:\img\undefined (系统找不到指定的文件。)
    at java.base/java.io.FileInputStream.open0(Native Method)
    at java.base/java.io.FileInputStream.open(FileInputStream.java:219)

以下是我写的图片upload和download的代码

<template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-style="{height: '150px'}"
                :row-class-name="tableRowClassName">

            <el-table-column prop="image" label="图片" align="center">
                <template slot-scope="{ row }">
                    <el-image style="width: auto; height: 40px; border:none;cursor: pointer;"
                              :src="getImage(row.image)"
                              :preview-src-list="[ `/common/download?name=${row.image}` ]" >
                   <!--     <div slot="error" class="image-slot">
                            <img src="./../../images/noImg.png"  style="width: auto; height: 40px; border:none;" >
                        </div>-->
                    </el-image>
                </template>
            </el-table-column>  .........
.....省略下面表格的column....


下面是关于图片upload和download的methods中的 方法

     /*在表格中显示图片*/
            getImage (image) {
                return `/common/download?name=${image}`
            },


   //上传图片的方法
            UploadImage(file,filelist) {
                //console.log(file);
                let fd = new FormData()
                fd.append('file', file.raw) //传给后台接收的名字 file
                axios.post('/common/upload', fd, {headers: {'Content-Type': 'multipart/form-data'}}).then(response => {
                    //上传成功后返回的数据,
                    console.log("上传图片响应收到");
                    console.log("上传图片到:" + response.data.data);
                    // 将图片地址给到表单.
                    this.eventAll.image=response.data.data
                })

            },

  /*关于上传图片*/
                fileList:[],
                dialogImageUrl: '',
                dialogVisibleImage : false,

                /*控制对话框是否展示*/
                dialogVisible: false,

【以下回答由 GPT 生成】

这个问题出现的原因是在获取图片路径时出错，导致路径为 "D:\img\undefined"，进而找不到对应的图片文件。解决这个问题的方法是检查代码中获取图片路径的逻辑是否正确。具体的解决方案如下:

  1. 确认图片上传成功，并且在服务器上的指定目录下存在对应的图片文件。

  2. 在Vue组件中，确认从后端获取的图片文件名正确，且不为空。可以通过在控制台打印 row.image 的值来检查。

  3. 确认 getImage 方法中传入的参数 image 的值正确，不为空。可以通过在控制台打印 image 的值来检查。

  4. 在 getImage 方法中，使用模板字符串 ${image} 时确保 image 的值不为 undefined。可以使用条件判断来处理无效的图片路径，例如：

getImage (image) {
  if (image) {
    return `/common/download?name=${image}`
  } else {
    // 处理无效的图片路径，例如返回一个默认图片的路径
    return '/default-image.jpg'
  }
}

  1. 确保在调用 getImage 方法时传入的参数 row.image 的值正确、不为空。可以通过在控制台打印 row.image 的值来检查。

  2. 确认调用 getImage 方法后返回的图片路径正确，不为空。可以通过在控制台打印 getImage(row.image) 的值来检查。

  3. 如果上述步骤都没有解决问题，可以检查后端接口 /common/download 的实现，确认接口能够正确返回图片文件。

如果以上步骤都处理正确，仍然出现错误，那么问题可能出现在其他地方，可能需要进一步调试或查看相关代码来找到问题所在。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
java.io.FileNotFoundException: D:\img\undefined (系统找不到指定的文件。)

没有找到对应的文件，文件明显不对，首先后缀都不存在。

你没有这个文件

img

看一下的service咋写的？这儿图片路径里面传了undefined，路径不全

路径没传全，看你的后台代码



```java
package com.itheima.reggie.controller;

import com.itheima.reggie.common.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.util.UUID;

/**
 * 文件的上传和下载
 */
@RestController
@RequestMapping("/common")
@Slf4j
public class CommonController {
    @Value("${reggie.path}")
    private String basePath;

    /**
     * 文件上传
     * @param file
     * @return
     */
    @PostMapping("/upload")
    public R<String> upload(MultipartFile file){
        //file是一个临时文件,需要转存到指定位置,否则本次请求完成后临时文件会删除
        log.info(file.toString());

        //原始文件名
        String originalFilename = file.getOriginalFilename();//abc.jpg
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
        //使用UUID重新生成文件名,防止文件名称重复造成文件覆盖
        String fileName = UUID.randomUUID().toString() + suffix;

        //判断当前目录是否存在
        File dir = new File(basePath);
        if(!dir.exists()){
            //目录不存在,需要创建
            dir.mkdirs();
        }

        try {
            file.transferTo(new File(basePath+fileName));
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
        return R.success(fileName);
    }

    /**
     * 文件下载
     * @param name
     * @param response
     */
    @GetMapping("/download")
    public void download(String name, HttpServletResponse response){

        try {
            //输入流，通过输入流读取文件内容
            FileInputStream fileInputStream = new FileInputStream(new File(basePath + name));

            //输出流，通过输出流将文件写回浏览器
            ServletOutputStream outputStream = response.getOutputStream();

            response.setContentType("image/jpeg");

            int len = 0;
            byte[] bytes = new byte[1024];
            while ((len = fileInputStream.read(bytes)) != -1){
                outputStream.write(bytes,0,len);
                outputStream.flush();
            }

            //关闭资源
            outputStream.close();
            fileInputStream.close();
        } catch (Exception e) {
            e.printStackTrace();
        }

    }
}

```

数据的问题，路径中有 undefined，这说明前端传递的图片路径是 undefined，看下前端传递的参数名称是不是写错了。

确保你的服务器端（后端）的 /common/download 路径能够正确处理图片的下载请求，而且在传递的图片名字后添加的参数名是否正确。

undefined 说明 getImage(row.image) 你这这行代码，row对象中没有image这个属性，需要看下你的row是从哪里获取的