# file-cloud

**Repository Path**: flexerp/file-cloud

## Basic Information

- **Project Name**: file-cloud
- **Description**: SpringBoot+Vue实现文件上传+文件管理
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2024-07-29
- **Last Updated**: 2024-07-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# FileCloud

项目说明：SpringBoot+Vue实现文件上传+文件管理（可用来制作图床和文件管理）

![](./file-cloud-frontend./doc/project.png)



主要功能：

- [x] 文件增删改查

- [x] 文件上传
- [x] 文件下载
- [x] 文件复制
- [x] IP黑名单



## 后端

file-cloud-backend



快速上手

> 查找TODO，根据TODO提示完成

application.yml

- 修改数据库并配置数据库
- 上传文件配置



上传后得到图片结果(例子)：http://127.0.0.1:8088/api/file/2023/06/05/f98bddb0-e548-4399-868c-536a23ff8773.png



> 注意：路径正确(如/api)



### 文件上传配置

application.yml 实现项目配置

```
# 上传文件配置
file:
  # 允许文件后缀
  suffers:
    - .jpg
    - .png
    - .gif
    - .bmp
    - .jpeg
    - .svg
    - .zip
  # 黑名单
  blocked:
    - "127.0.0.1"
    - "https://blocked-origin1.com"
```



`FileProperties.savePath`设置保存文件路径



### 具体实现

- 配置静态资源映射(CorsConfig重写addResourceHandlers)
- 配置文件常量FileProperties(配置保存文件路径和允许文件后缀)
- yml允许支持上传的文件后缀
- 实体类FileInfo
- 编写Controller和service
- IP黑名单(重写HandlerInterceptor的preHandle方法，注册到CorsConfig)



## 前端



**快速上手**

TODO

- [ ] 配置prettier和eslint
- [ ] 配置后端地址
- [ ] 修改项目基本信息(如项目title,logo)



前端插件：

| 技术                                                         | 版本   |
| ------------------------------------------------------------ | ------ |
| [Vue](https://gitee.com/link?target=https%3A%2F%2Fvuejs.org%2F) | 2.6.14 |
| axios                                                        | 1.3.5  |
| file-saver                                                   | 2.0.5  |
| view-design                                                  | 4.7.0  |
| vue-clipboard2                                               | 0.3.3  |



### 具体实现

URL下载

```
    download(v) {
      // 用file-server实现下载文件v.url
      const fileUrl = v.url
      const suffix = fileUrl.substring(fileUrl.lastIndexOf('.'))

      const xhr = new XMLHttpRequest()
      xhr.open('GET', v.url, true)
      xhr.responseType = 'blob'

      xhr.onload = function () {
        if (xhr.status === 200) {
          // 时间戳.文件(可根据实际情况更改文件名)
          const fileName = new Date().getTime() + suffix
          saveAs(xhr.response, fileName)
        }
      }
      xhr.send()
    },
```



上传文件

```
    async doUploadFile() {
      this.loadingUpload = true
      try {
        const formData = new FormData()
        formData.append('uploadFile', this.uploadFile)
        formData.append('type', this.formData.type)
        formData.append('description', this.formData.description)

        const res = await uploadFile(formData)
        if (res.code === 0) {
          this.$Message.success('上传成功')
        }
        this.uploadFile = null
        this.formData = {}
      } catch (error) {
        console.error(error)
      } finally {
        this.loadingUpload = false
        this.addVisible = false
        await this.getList()
      }
    },
```