Vuetify+；Spring：如何正确上传和显示图像？

我已经用Vuetify和Spring上传和显示了图像。 这是工作，但我不确定我做得是否正确。我不确定我是否采取了正确的方法来解决这个问题。你能检查一下并说出你的想法吗

在Vuetify侧，我使用v-file-input组件和axios将图像发送到服务器：

        <v-file-input
          v-model="selectedLogo"
          accept="image/png, image/jpeg, image/bmp"
          placeholder="Выберите Логотип"
          prepend-icon="mdi-camera"
          label="Логотип"
          show-size
        >
          <template v-slot:append-outer>
            <v-btn small @click="uploadLogo">
              <v-icon dense>mdi-upload</v-icon>
            </v-btn>
          </template>
        </v-file-input>


//...

uploadLogo(){
        uploadLogo(this.$axios, this.company.id, this.selectedLogo)
      }


//...

export const uploadLogo = function ($axios, id, logo) {
  let formData = new FormData()
  formData.append("logo", logo)
  return $axios.post(url+ `/${id}/logo`,
    formData,
    {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
}

我的想法是通过URL上传/显示图像

http://server/api/companies/{id}/logo

而不知道logo文件的名称

对于显示，我使用v-img组件：

 <v-img :src="'http://localhost:8081/api/companies/' + company.id +'/logo'"></v-img>

问题:

你觉得我的解决方案怎么样

这里我使用RestController来显示图像。 我想我可以通过它在服务器上的位置直接获取图像。不使用RestController进行

@GetMapping

。例如，如果我的图像存储在服务器上路径为

/images/companys/logo

的文件夹中，我可以通过路径为

的URL获取图像http://server/images/companies/logo/namelogo.png

这样，我应该知道服务器上文件的名称

---

如果不使用RestController for@GetMapping，如何显示图像？

我想我找到了问题的答案。在春季，我应该设置ResourcesHandlerRegistry

registry.addResourceHandler（“/images/**”）.addResourceLocations（“file:/images/”）。然后我将根据图像在服务器上的位置获取图像。我认为如果我想在服务器上隐藏文件的位置，可以使用RestController。如果我想直接从服务器获取图像，请使用ResourceHandlerRegistry。你怎么看？我想我找到了我问题的答案。在春季，我应该设置ResourcesHandlerRegistry
registry.addResourceHandler（“/images/**”）.addResourceLocations（“file:/images/”）。然后我将根据图像在服务器上的位置获取图像。我认为如果我想在服务器上隐藏文件的位置，可以使用RestController。如果我想直接从服务器获取图像，请使用ResourceHandlerRegistry。你觉得怎么样？
@Service
public class FileStorageService {

    private final Path logoStorageLocation;

    @Autowired
    public FileStorageService(FileStorageProperties fileStorageProperties) {
        this.logoStorageLocation = Paths.get(fileStorageProperties.getLogoDir())
                .toAbsolutePath().normalize();

        try {
            Files.createDirectories(this.logoStorageLocation);
        } catch (Exception ex) {
            throw new FileStorageException("Could not create the directory where the uploaded files will be stored.", ex);
        }
    }

    public String uploadLogo(Long id, MultipartFile file) {

        String fileExtension = StringUtils.getFilenameExtension(file.getOriginalFilename());

        String fileName = id.toString() + "." + fileExtension;

        try {
            if(fileName.contains("..")) {
                throw new FileStorageException("Sorry! Filename contains invalid path sequence " + fileName);
            }
            Path targetLocation = this.logoStorageLocation.resolve(fileName);
            Files.copy(file.getInputStream(), targetLocation, StandardCopyOption.REPLACE_EXISTING);

            return fileName;
        } catch (IOException ex) {
            throw new FileStorageException("Could not store file " + fileName + ". Please try again!", ex);
        }
    }

    public Resource loadLogoAsResource(Long id) {

        String fileName = id.toString() + ".png";
        try {
            Path filePath = this.logoStorageLocation.resolve(fileName).normalize();
            Resource resource = new UrlResource(filePath.toUri());
            if(resource.exists()) {
                return resource;
            } else {
                throw new FileNotFoundException("File not found " + fileName);
            }
        } catch (MalformedURLException ex) {
            throw new FileNotFoundException("File not found " + fileName, ex);
        }
    }

}

 <v-img :src="'http://localhost:8081/api/companies/' + company.id +'/logo'"></v-img>