基于vue spring boot 的图片上传 和 显示（包含多个图片显示）

一、图片上传（后端）

//此处来自于配置springBoot的配置文件，
//配置文件：photo:
 //           path: D:\demoImages\
    //存储图片的路径 例如：D:\demoImages\
    @Value("${photo.path}")
    private String basePath;

    @RequestMapping("/upload")
    public Result<String> upload(MultipartFile file){
        System.out.println("file======="+file);
        String originalFilename = file.getOriginalFilename();
        System.out.println("originalFilename====="+originalFilename);
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
        String fileName = UUID.randomUUID().toString() + suffix;//dfsdfdfd.jpg
        //创建一个目录对象
        File dir = new File(basePath);
        //判断当前目录是否存在
        if(!dir.exists()){
            //目录不存在，需要创建
            dir.mkdirs();
        }  //将临时文件转存到指定位置
        try {
            file.transferTo(new File(basePath + fileName));
        } catch (IOException e) {
            e.printStackTrace();
        }
        return Result.getSuccessResult(fileName);
    }

图片上传（前端Vue）

element plus 官网有多种上传格式 这只是其中一种.
此处没有保存到数据库.
大家可以自己编写,将获取的图片名称保存到数据库

            <!-- 上传照片 -->
            <!-- 注 :headers设置的是请求头信息,如果没有需要可以省略
            在这里我需要使用Token所以会设置请求头信息
            剩下的大家可以到element plus 官网查看
 -->
            <el-upload
              action="后端请求路径"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :headers="headerObj"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>

            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>

const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const headerObj=ref({token:sessionStorage.getItem("token")})
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 5) { //此处可以设置上传图片的大小限制
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};

效果如下

二 、图片显示(单个图片显示) 后端

    @RequestMapping("/down")
    public void download(@RequestBody 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();
        }

    }

图片显示(单个图片显示) 前端

                      <el-image
                        style="width: 30%; height: 30%"
                        :src="url"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        preview="1"
                        fit="cover"
                      />

const url = ref();
const srcList = ref(['']);
const downPhoto = () => {
// headers 如果没有需要可以不设置
    axios
      .post("/demo/photo/down", 照片的名称, {
        responseType: "blob",
        headers: { token: sessionStorage.getItem("token") }, 
      })
      .then((res) => {
        let blob = new Blob([res.data]); // 返回的文件流数据
        url.value= window.URL.createObjectURL(blob); //转化为路径

      })
      .catch((error) => {
        ElMessage.error("下载图片失败");
      });
 
};

三. 图片显示(多个图片) 此种方式是我自己想出来的,有一些问题,供大家参考（谁知道正确的方法请告诉我一下，我很需要这个技术谢谢）

后端代码和显示单个图片相同
前端代码

 <el-image
                        v-for="image in url"
                        :key="image"
                        style="width: 30%; height: 30%"
                        :src="image"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        preview="1"
                        fit="cover"
                      />

const url = ref([]);
//需要先进行查询操作,查询出照片的名称 例如
const getPhotoName=()=>{
//获取到photoName后
downPhoto();
}
const photo = ref([]);
const downPhoto = () => {
//此处为循环多次对后端发出路径请求, 应该对性能有影响
  for (var i = 0; i < photo.value.length; i++) { 
    axios
      .post("/demo/photo/down", photo.value[i], {
        responseType: "blob",
        headers: { token: sessionStorage.getItem("token") },
      })
      .then((res) => {
        let blob = new Blob([res.data]); // 返回的文件流数据
        tmp = window.URL.createObjectURL(blob); //转化为路径
        //回调函数（push时不可以在.then中进行，因为.then时异步的，需要使用回调函数）
        recoll(tmp);
      })
      .catch((error) => {
        ElMessage.error("下载图片失败");
      });

  }
};

//回调函数值（路径）
let tmp;
//中间数组
let a = [];
let vv=0// 判断什么时候将中间数组a的值赋给url
function recoll(aa) {
  a.push(aa); //有错误 但是用起来好像没什么影响
  vv = vv+1
  if(vv==photo.value.length){ //
    url.value = a;
  }
  console.log("url===", url.value);
}