springboot接收上传图片时,图片存储路径问题

可以将图片存储在本地文件系统或者云存储中，具体路径可以根据实际情况进行配置。在SpringBoot中，可以使用MultipartFile类来接收上传的图片，然后使用File类将图片保存到指定路径。同时，也可以使用第三方库，如七牛云、阿里云等，来实现图片的存储和管理。

相关问题

SpringBoot项目数据库存储本地图片路径

### 实现 Spring Boot 中将本地图片路径保存到数据库

为了实现这一功能，在 Spring Boot 项目中可以创建实体类用于映射数据库表，编写控制器来处理前端上传请求并保存文件至服务器磁盘上指定位置，最后把该文件的位置信息存入数据库。

#### 创建实体类 ImageEntity 映射数据库中的记录

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class ImageEntity {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
    
    private String filePath;

    // Getters and Setters
    
}

此代码定义了一个简单的 JPA 实体 `ImageEntity` 来表示图像数据模型[^1]。

#### 编写 Repository 接口操作数据库

利用 Spring Data 提供的功能简化对持久层的操作：

import org.springframework.data.jpa.repository.JpaRepository;

public interface ImageRepository extends JpaRepository<ImageEntity, Long> {}

这段声明式的接口允许应用程序轻松执行 CRUD 操作而无需手动编码 SQL 查询语句。

#### 控制器部分负责接收 HTTP 请求并将接收到的数据保存下来

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.UUID;

@RestController
public class ImageController {

    @Autowired
    private ImageRepository imageRepo;

    @PostMapping("/upload")
    public String handleFileUpload(@RequestParam("file") MultipartFile file){
        try{
            if(!file.isEmpty()){
                byte[] bytes = file.getBytes();
                
                Path path = Paths.get("uploads/" + UUID.randomUUID().toString());
                Files.write(path, bytes);

                ImageEntity imgRecord = new ImageEntity();
                imgRecord.setFilePath(path.toString());

                imageRepo.save(imgRecord);
                
                return "You successfully uploaded!";
            }
        } catch (Exception e) {
            return "Failed to upload.";
        }

        return "Please select a valid file.";
    }
}

上述片段展示了如何构建 RESTful Web Service API 处理 POST 方法提交过来的多部件形式文件，并将其内容写出到特定目录下；同时更新关联的对象实例属性值为新生成文件所在绝对地址再调用 save 方法完成入库动作[^2]。

怎么预先在数据库存储图片路径，然后vue前端怎么接收springboot后端从数据库获取到的路径并显示图片

首先，在数据库中存储图片路径需要在后端进行操作。可以将图片存储在服务器上的某个文件夹中，并在数据库中存储该图片的路径，例如存储在路径为`/images`的文件夹中，则可以将图片路径存储为`/images/xxx.jpg`。

接下来，后端可以通过接口将存储在数据库中的图片路径返回给前端。在Spring Boot中，可以使用`@RestController`注解定义一个RESTful接口，使用`@GetMapping`注解定义一个GET请求的接口，然后使用`ResponseEntity`将图片返回给前端，例如：

@RestController
public class ImageController {

    @GetMapping("/image/{id}")
    public ResponseEntity<byte[]> getImage(@PathVariable("id") Long id) throws IOException {
        // 根据id从数据库中获取图片路径
        String imagePath = getImagePathById(id);

        // 读取图片文件
        File file = new File(imagePath);
        FileInputStream input = new FileInputStream(file);
        byte[] bytes = new byte[input.available()];
        input.read(bytes);
        input.close();

        // 设置HTTP响应头
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.IMAGE_JPEG);

        // 返回图片数据
        return new ResponseEntity<>(bytes, headers, HttpStatus.OK);
    }

    // 根据id从数据库中获取图片路径的实现代码
    private String getImagePathById(Long id) {
        // ...
    }
}

在Vue前端中，可以使用`<img>`标签来显示图片。在`src`属性中设置图片的URL，即可从后端获取图片并显示，例如：

<template>
  <div>
    <img :src="imageSrc" alt="image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: ''
    }
  },
  mounted() {
    this.loadImage()
  },
  methods: {
    loadImage() {
      // 发送GET请求获取图片数据
      axios.get('/image/1', {
        responseType: 'arraybuffer'
      }).then(response => {
        // 将图片数据转换为Base64编码的字符串
        let base64Str = btoa(
          new Uint8Array(response.data)
            .reduce((data, byte) => data + String.fromCharCode(byte), '')
        )
        // 设置图片的URL
        this.imageSrc = 'data:image/jpeg;base64,' + base64Str
      })
    }
  }
}
</script>

这样，前端就可以从后端获取存储在数据库中的图片并显示了。