# cloud-file-store-server

**Repository Path**: mySpaceHome_tonly_pam/cloud-file-store-server

## Basic Information

- **Project Name**: cloud-file-store-server
- **Description**: this is a cloud file system. 在线的文件系统
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-03-17
- **Last Updated**: 2024-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: SpringBoot, 文件系统, Web, webflux, mongo

## README

# 在线文件系统

使用到的java技术栈：

- spring-boot
- webflux
- reactive

数据库

- mongodb

前端：

- vue3
- vite
- pinia
- element-plus-ui
- vxe-table
- axios

## 需要的配置

- 后端（application.yaml）: 

    ```yaml
    file:
      # 云文件系统对应服务器的存储位置
      # 文件分割符('/', '\')统一使用逻辑符号'->'代替
      basePath: C:->myfile->cloud
      # 文件下载链接上的host地址, 按照需求选择你的局域网ip或者是公网ip
      downloadIp: 127.0.0.1
    ```
  
- 前端（vite.config.js）

    项目位置
    
    ```text
    src/main/resources/vue-project
    ```

    ```js
    // https://vitejs.dev/config/
    export default defineConfig({
        server: {
            proxy: {
                '/dev': {
                      // 改为你的服务器地址
                      target: 'http://localhost:8081',
                      changeOrigin: true,
                      rewrite: (path) => path.replace(/^\/dev/, '')
                }
            }
        }
    })
    ```

## 启动项目

- 后端: run org.uhu.cloudfilestore.SystemApplication.main()
- 前端: 命令行 npm run dev

## 后端接口

org.uhu.cloudfilestore.router.ApplicationRouter

用户（User.java）

- 登录 POST `/user/doLogin` application/json

    ```json
    body: {
      account: String,
      password: String
    }
    ```
 
- 注册 POST `/user/register` application/json

    ```json
    body: {
      account: String,
      password: String,
      rePassword: String,
      email: String
    }
    ```
 
- GET "/user/page/{current}/{size}" 暂未使用
 
- PUT "/user/update" 暂未使用

- DELETE "/user/del/{ids}" 暂未使用

文件夹（Folder.java）

- 分页查询 GET `/cloud/{current}/{size}?location=&keyword=`

    ```json
    path-variable: {
      current: Number,
      size: Number
    }
    query: {
      // 哪个文件夹下查询，例如"->myfile->myImage"
      location: String
      // 子文件夹或者文件名称的关键字like查询
      keyword: String
    }
    ```

- 创建文件夹 POST `/cloud/new` application/json

    ```json
    body: {
      // 哪个文件夹下创建，例如"->myfile->myImage"
      location: String,
      // 新文件夹名称
      name: String
    }
    ```
    
- 删除文件夹 DELETE `"/cloud/delete?folderPaths=`

    ```json
    query: {
      // 文件夹路径，从根目录开始，多个用','分割，例如"->myfile->myImage,->myfile->myVideo"
      folderPaths: String
    }
    ```

- 更新文件夹 PUT `/cloud/update` application/json

    ```json
    body: {
      // 原文件夹路径，例如"->myfile"
      location: String,
      // 原文件夹名称，例如"myImage"
      name: String,
      // 新的文件夹路径，例如"->yourfile"
      replaceLocation: String,
      // 新文件夹名称，例如"myImg"
      repalceName: String
    }
    ```
  
文件（FolderOrFile）

- 上传文件 POST `/upload", fileHandler.upload?folderPath=&override=&${filename}=` multipart/form

  ```json
  query: {
      // 文件夹路径，从根目录开始例如"->myfile->myImage"
      folderPath: String,
      // 是否覆盖同名文件
      override: Boolean,
      // 这个参数比较抽象，是你上传的文件名称（file.name）=文件大小（file.size），用于计算上传进度。例如flower.png=13001024
      ${filename}: Number
  }
  form: {
    // js的file对象，表单中可填入多个
    files: File
  }
  ```
  
  ```js
  // 该接口会持续返回数据（中途可能和最后一条是文件名：下载链接），前端建议使用fetch方法进行操作
  const form = new FormData()
  let uri = `/upload?folderPath=${location}&override=${override}`
  
  for (const file of files) {
    form.append("files", file)
    uri += `&${file.name}=${file.size}`
  }
  const response = await fetch(this.axios.defaults.baseURL + uri, {
    method: "POST",
    headers: {
      // 用户token
      'Authorization': _this.axios.defaults.headers.common['Authorization']
    },
    body: form,
  });
  
  if (!response.body) return;
  const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
  while (true) {
    // done = true 表示上传结束
    var { value, done } = await reader.read();
    if (done) {
      break
    } else {
      // ...
      // 这里可以消费信息 例如 "file1：94%"
      // 这里可以消费信息 例如 "file1：95%"
      // 这里可以消费信息 例如 "file1：96%"
      // ...
      // 这里可以消费信息 例如 "上传完毕 file1：文件下载路径"
      console.log(value)
    }
  }
  ```

- 上传单个文件 POST `/uploadOne", fileHandler.uploadOne` 暂未使用
- 下载文件 GET `/download", fileHandler.download?filename=`

  ```json
  query: {
    // 非普通的路径，而是一串加密的字符串（使用👇获取文件下载链接接口获取）
    filename: String
  }
  ```

- 播放视频文件 GET `/play", fileHandler.playVideo?`

  ```json
  query: {
    // 非普通的路径，而是一串加密的字符串（使用👇获取播放链接接口获取）
    videoName: String
  }
  ```

- 更新文件 PUT `/update", fileHandler.updateFile`

  ```json
    body: {
      // 原文件夹路径，例如"->myfile"
      location: String,
      // 原文件名称，例如"dog.png"
      name: String,
      // 新的文件夹路径，例如"->yourfile"
      replaceLocation: String,
      // 新文件夹名称，例如"cat.png"
      repalceName: String
    }
  ```
    
- 删除文件 DELETE `/delete", fileHandler.deleteFile&filepaths`

```json
query: {
  // 文件路径，从根目录开始，多个用','分割，例如"->myfile->myImage.png,->myfile->myVideo.mp4"
  filepaths: String
}
```
    
- 获取文件下载链接 GET `/getDownloadPath", fileHandler.getDownloadPath` 暂未使用
- 获取播放链接 GET `/getPlayPath ` 暂未使用


## 页面展示

![login.png](img/login.png)
![home.png](img/home.png)
![rightclick.png](img/rightclick.png)
![playvideo.png](img/playvideo.png)
![showImage.png](img/showImage.png)
![upload.png](img/upload.png)