阿里云OSS文件上传与管理系统开发

系统功能概述

本系统通过阿里云OSS（Object Storage Service）实现文件上传、管理及删除功能，支持图片上传、新增、修改及批量删除操作。系统采用Vue.js前端框架与Spring Boot后端框架搭建，实现了用户友好的操作界面和高效的文件管理功能。

系统技术架构

1. 依赖管理

阿里云OSS SDK：用于实现与阿里云OSS的交互，版本号为3.8.0。

Spring Boot：作为后端框架，负责处理HTTP请求及业务逻辑。

Vue.js：作为前端框架，负责实现用户界面及交互功能。

Element UI：用于构建美观的用户界面组件。

2. 后端配置

1. 阿里云OSS配置

API访问地址：https://jjjqqq.oss-cn-beijing.aliyuncs.com/

账号信息：
- Access Key ID：LTAI4Fzm3c6EmUexCHLvZNcm
- Access Key Secret：b8OrjTpYWW3sZSlimy4sxr2WJuNX09

文件存储路径：photo/

2. 文件上传逻辑

文件名称处理：保留原始文件扩展名，生成唯一随机名称。

文件上传：使用阿里云OSS客户端进行文件上传操作。

文件路径返回：返回上传成功后的文件路径，供前端展示。

3. 前端页面功能

1. 主界面操作

新增按钮：点击后弹出文件上传表单。

批量删除按钮：支持多选项删除，前端与后端接口联动。

数据表格：显示文件列表，支持排序、过滤及分页操作。

图片预览：在表格中直接展示图片，支持鼠标悬停查看。

2. 新增页面

表单提交：支持单选文件上传，自动处理图片路径。

表单校验：在提交前验证文件是否有效，避免无效提交。

3. 修改页面

表单数据回显：在修改前，展示当前数据，减少重复填写。

图片删除：在修改前删除旧图片，避免数据冗余。

代码实现细节

1. 后端控制器

@RestController@RequestMapping("/file")public class FileController {    // 阿里云OSS配置    private static final String ENDPOINT = "oss-cn-beijing.aliyuncs.com";    private static final String ACCESS_KEY_ID = "LTAI4Fzm3c6EmUexCHLvZNcm";    private static final String ACCESS_KEY_SECRET = "b8OrjTpYWW3sZSlimy4sxr2WJuNX09";    private static final String BACKET_NAME = "jjjqqq";    private static final String FOLDER = "photo/";    private static final String URl = "https://jjjqqq.oss-cn-beijing.aliyuncs.com/";    @CrossOrigin    @RequestMapping("uploadPhoto")    public Map
   
     uploadPhoto(MultipartFile file) {        Map
    
      map = new HashMap<>();        OSSClient ossClient = null;        InputStream inputStream = null;        try {            ossClient = new OSSClient(ENDPOINT, ACCESS_KEY_ID, ACCESS_KEY_SECRET);            String filename = file.getOriginalFilename();            String suffix = filename.substring(filename.lastIndexOf("."));            String newFileName = UUID.randomUUID().toString() + suffix;            inputStream = file.getInputStream();            ossClient.putObject(BACKET_NAME, FOLDER + newFileName, inputStream);            map.put("filePath", URl + FOLDER + newFileName);        } catch (Exception e) {            e.printStackTrace();        } finally {            if (inputStream != null) {                try {                    inputStream.close();                } catch (IOException e) {                    e.printStackTrace();                }            }            if (ossClient != null) {                ossClient.shutdown();            }        }        return map;    }}

2. 前端Vue.js逻辑

export default {    data() {        return {            tableData: [],            multipleSelection: [],            dialogFormVisible: false,            form: {                photo: ""            },            total: 0,            currentPage: 1,            pageSize: 5        }    },    methods: {        queryDrug() {            this.$axios.get("http://localhost:8080/drug/queryDrug", {                params: {                    currentPage: this.currentPage,                    pageSize: this.pageSize                }            }).then(response => {                this.tableData = response.data.list;                this.total = response.data.total;            });        },        handleAvatarSuccess(res) {            this.form.photo = res.filePath;        },        beforeAvatarUpload(file) {            const isJPG = file.type === 'image/jpeg';            const isLt2M = file.size / 1024 / 1024 < 2;            if (!isJPG) {                this.$message.error('图片格式错误，仅支持JPG!');            }            if (!isLt2M) {                this.$message.error('图片大小超出限制，建议不超过2MB!');            }            return isJPG && isLt2M;        }    }}

3. 工具类OSSUtil

public class OSSUtil {    private static final String ENDPOINT = "oss-cn-beijing.aliyuncs.com";    private static final String ACCESS_KEY_ID = "LTAI4Fzm3c6EmUexCHLvZNcm";    private static final String ACCESS_KEY_SECRET = "b8OrjTpYWW3sZSlimy4sxr2WJuNX09";    private static final String BACKET_NAME = "jjjqqq";    private static final String FOLDER = "photo/";    private static final String URl = "https://jjjqqq.oss-cn-beijing.aliyuncs.com/";    public static void deleteFile(String fileName) {        OSSClient ossClient = new OSSClient(ENDPOINT, ACCESS_KEY_ID, ACCESS_KEY_SECRET);        String replaceName = fileName.replace(URl, "");        ossClient.deleteObject(BACKET_NAME, replaceName);        ossClient.shutdown();    }}

系统功能亮点

高效的文件上传：支持多种文件格式上传，自动处理文件命名。

用户友好的界面：通过Element UI构建直观操作界面，减少用户学习成本。

灵活的数据管理：支持新增、修改及批量删除操作，满足不同场景需求。

高效的图片管理：在修改操作前自动删除旧图片，减少存储空间浪费。

良好的扩展性：通过模块化设计，便于后续功能扩展和维护。

系统优势

高效性：通过异步处理和分页技术，提升文件管理效率。

可扩展性：支持不同场景的文件上传和管理需求，适应业务增长。

用户体验：直观的界面和操作流程，减少用户学习成本。

总结

本系统通过结合前端与后端技术，实现了阿里云OSS文件管理功能，具备易用性和扩展性，适合需要高效文件管理的应用场景。

转载地址：http://jpljz.baihongyu.com/

你可能感兴趣的文章