springboot+vue+mysql实现前端上传文件到本地并将url存入本地数据库

实现前端上传文件到本地并将url存入本地数据库，需要前后端协同完成以下几个步骤：

1. 前端使用 Vue.js 实现文件上传，并将文件传递给后端。
2. 后端使用 Spring Boot 接收前端传递的文件，并将文件保存到本地。
3. 后端生成本地文件的URL，将URL保存到数据库中。
4. 前端从数据库中获取URL，展示文件信息。

以下是具体实现步骤：

1. 前端实现文件上传，使用 Vue.js 和 Axios 实现，代码如下：

<template>
  <div>
    <input type="file" @change="onFileChange">
    <button @click="uploadFile">上传</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    onFileChange(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      const formData = new FormData();
      formData.append('file', this.file);

      axios.post('/api/upload', formData).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.log(error);
      });
    }
  }
};
</script>

2. 后端使用 Spring Boot 接收前端传递的文件，并将文件保存到本地。代码如下：

@RestController
@RequestMapping("/api")
public class FileController {
  @Value("${file.upload-dir}")
  private String uploadDir;

  @PostMapping("/upload")
  public String uploadFile(@RequestParam("file") MultipartFile file) throws IOException {
    String filename = file.getOriginalFilename();
    Path path = Paths.get(uploadDir, filename);
    Files.write(path, file.getBytes());

    return "上传成功";
  }
}

在 Spring Boot 中，使用 `@Value` 注解获取配置文件中的变量值，即上传文件存储的路径。

3. 后端生成本地文件的URL，将URL保存到数据库中。代码如下：

@RestController
@RequestMapping("/api")
public class FileController {
  @Autowired
  private FileRepository fileRepository;

  @Value("${file.base-url}")
  private String baseUrl;

  @PostMapping("/upload")
  public String uploadFile(@RequestParam("file") MultipartFile file) throws IOException {
    String filename = file.getOriginalFilename();
    Path path = Paths.get(uploadDir, filename);
    Files.write(path, file.getBytes());

    String url = baseUrl + filename;
    fileRepository.save(new FileEntity(filename, url));

    return "上传成功";
  }
}

在 Spring Boot 中，使用 `@Value` 注解获取配置文件中的变量值，即本地文件的URL前缀。

4. 前端从数据库中获取URL，展示文件信息。代码如下：

<template>
  <div>
    <div v-for="file in files" :key="file.id">
      <a :href="file.url">{{ file.name }}</a>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      files: []
    };
  },
  mounted() {
    axios.get('/api/files').then(response => {
      this.files = response.data;
    }).catch(error => {
      console.log(error);
    });
  }
};
</script>

在 Vue.js 中，使用 `axios` 发送请求获取文件信息，展示文件的名称和URL。需要注意的是，文件的URL需要使用 `<a>` 标签展示，并且需要设置 `href` 属性。