vue中，实现阿里云OSS文件管理-五八三

开发环境

编辑器：VsCode
Vue：2.6.14
Less：4.0.0
ali-oss：6.17.1
ant-design-vue：1.7.8

阿里云OSS官方文档：点击打开

OSS配置

1、进入阿里云OSS控制台 -> Bucket管理 -> 数据安全 -> 跨域设置

2、创建如下一条规则：

依赖安装

1、Ant Design Vue：npm install ant-design-vue@1.7.8 --save

2、ali-oss：npm install ali-oss --save

在main.js中引入Antd依赖

// Antd依赖
import Antd from 'ant-design-vue';
// Antd样式依赖
import 'ant-design-vue/dist/antd.css';
// 全局使用Antd
Vue.use(Antd);

效果演示

动画.gif

完整代码

vue文件

<template>
    <div class="bodys">
        <!-- 标题部分 -->
        <div class="title">
            <!-- 阿里云logo -->
            <div style="color: #fe6a00; font-size: 1.8rem"><a-icon type="aliyun" /></div>
            <!-- 标题文字 -->
            <div>{{ title }}</div>
        </div>

        <!-- 功能操作部分 -->
        <div class="btns">
            <!-- 文件名称搜索框 -->
            <div>
                <a-input v-model="queryInfo.fileName" placeholder="文件名称搜索">
                    <a-icon slot="prefix" type="search" />
                </a-input>
            </div>
            <!-- 搜索按钮 -->
            <div>
                <a-button type="primary" icon="search" @click="queryAllOssFileList">搜索</a-button>
            </div>
            <!-- 重置搜索按钮 -->
            <div>
                <a-button icon="redo" @click="resetQuery">重置搜索</a-button>
            </div>
        </div>

        <!-- 数据表格部分 -->
        <div class="dataTable">
            <a-table :columns="columns" :data-source="fileList" rowKey="name" :loading="loading">
                <span slot="size" slot-scope="text, record"> {{ formatFileSize(record.size) }} </span>
                <span slot="lastModified" slot-scope="text, record"> {{ formatDate(record.lastModified) }} </span>
                <span slot="doit" slot-scope="text, record">
                    <div class="dtBtns">
                        <div>
                            <a-button icon="vertical-align-bottom" @click="downloadOssFile(record.name)">下载</a-button>
                        </div>
                        <div>
                            <a-button type="danger" icon="delete" @click="deleteOssFile(record.name)">删除</a-button>
                        </div>
                    </div>
                </span>
            </a-table>
        </div>

        <!-- 文件上传部分 -->
        <div class="upload">
            <a-upload-dragger :showUploadList="false" :beforeUpload="beforeUpload">
                <p class="ant-upload-drag-icon">
                    <a-icon type="folder" />
                </p>
                <p class="ant-upload-text">选择上传的文件</p>
                <p class="ant-upload-hint">点击选择，或将文件拖拽至此处上传</p>
            </a-upload-dragger>
        </div>
    </div>
</template>

<script>
// 获取oss客户端对象
const OSS = require('ali-oss');
export default {
    name: 'DemoOne',
    data() {
        return {
            // 网页标题
            title: '阿里云OSS - 文件管理',
            // 查询条件
            queryInfo: {
                fileName: ''
            },
            // 加载
            loading: false,
            // oss文件集合
            fileList: [],
            // 数据表格配置
            columns: [
                {
                    title: '文件名称',
                    dataIndex: 'name',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '文件大小',
                    dataIndex: 'size',
                    key: 'size',
                    scopedSlots: { customRender: 'size' },
                    align: 'center'
                },
                {
                    title: '更新时间',
                    dataIndex: 'lastModified',
                    key: 'lastModified',
                    scopedSlots: { customRender: 'lastModified' },
                    align: 'center'
                },
                {
                    title: '操作',
                    dataIndex: 'doit',
                    key: 'doit',
                    scopedSlots: { customRender: 'doit' },
                    align: 'center'
                }
            ],
            // oss客户端实例 -  初始化
            client: new OSS({
                // 你的Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
                region: '你的Bucket所在地域',
                // 你的accessKeyId 和 accessKeySecret
                // 官方建议：阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
                accessKeyId: '你的accessKeyId',
                accessKeySecret: '你的accessKeySecret',
                // 你的Bucket名称。
                bucket: '你的Bucket名称'
            })
        };
    },
    mounted() {
        this.queryAllOssFileList();
    },
    methods: {
        /**
         * 下载oss文件
         * file_name 文件名称
         */
        downloadOssFile(file_name) {
            let app = this;
            // 下载函数
            async function getStream() {
                try {
                    // 自定义响应头
                    // 获取下载文件的签名URL，配置文件HTTP头中的Content-Disposition为attachment，实现浏览器访问时自动下载文件，并自定义下载后的文件名称。
                    const response = {
                        'content-disposition': `attachment; filename=${encodeURIComponent(file_name)}`
                    };
                    // 填写不包含Bucket名称在内的Object完整路径。
                    // 此例上传的文件存放在根目录，所以只需要传入文件名称
                    const url = app.client.signatureUrl(file_name, { response });
                    // 新窗口打开URL
                    window.open(url);
                } catch (err) {
                    // 全局提示
                    this.$message.error('下载发生错误');
                    // 控制台答应错误
                    console.error(err);
                }
            }
            // 开始下载
            getStream();
        },
        /**
         * 删除oss文件
         * file_name 文件名称
         */
        deleteOssFile(file_name) {
            // 指定Bucket
            this.client.useBucket('你的Bucket名称');
            let app = this;
            // 删除函数
            async function deleteObject() {
                try {
                    // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
                    // 此例上传的文件存放在根目录，所以只需要传入文件名称
                    await app.client.delete(file_name);
                    // 查询oss文件
                    app.queryAllOssFileList();
                    // 全局提示
                    app.$message.success('删除成功');
                } catch (err) {
                    // 全局提示
                    app.$message.error('删除失败');
                    // 控制台答应错误
                    console.error(err);
                }
            }
            // 开始删除
            deleteObject();
        },
        // 重置oss文件查询
        resetQuery() {
            // 重置条件
            this.queryInfo = {
                fileName: ''
            };
            // 查询oss文件
            this.queryAllOssFileList();
        },
        // 查询oss文件
        queryAllOssFileList() {
            // 开始加载
            this.loading = true;
            let app = this;
            // 开始查询oss文件
            this.client
                .list({
                    // 查询符合特定前缀的文件
                    prefix: app.queryInfo.fileName
                })
                .then(function (resp) {
                    // 为了优化用户体验，我在此处加了一个延时响应，可自行删改
                    // 实际上oss的接口响应速度是极快的
                    setTimeout(() => {
                        // 停止加载
                        app.loading = false;
                        // 赋值文件集合
                        app.fileList = resp.objects;
                    }, 400);
                })
                .catch(function (err) {
                    // 停止加载
                    app.loading = false;
                    // 全局提示
                    this.$message.error('文件查询发生错误');
                    // 控制台打印错误
                    console.error(err);
                });
        },
        /**
         * 选择文件后触发的函数
         * file 选中的文件对象
         */
        beforeUpload(file) {
            // 上传oss文件
            this.ossFileUpload(file);
            // 停止组件触发上传
            // 因此处使用的是自定义的上传方式：ossFileUpload(file)
            return false;
        },
        /**
         * 上传oss文件
         * file 文件对象
         */
        ossFileUpload(file) {
            // 自定义头部信息
            const headers = {
                // 指定Object的存储类型。
                'x-oss-storage-class': 'Standard',
                // 指定Object的访问权限。
                'x-oss-object-acl': 'private',
                // 指定PutObject操作时是否覆盖同名目标Object。
                // 此处设置为true，表示禁止覆盖同名Object。
                'x-oss-forbid-overwrite': 'true'
            };
            let app = this;
            // 开始上传文件
            this.client
                // put(文件名称，文件对象，{ 自定义头部信息 })
                .put(file.name, file, { headers })
                .then(function () {
                    // 全局提示
                    app.$message.success('文件上传成功');
                    // 查询oss文件
                    app.queryAllOssFileList();
                })
                .catch(function (err) {
                    // 全局提示
                    app.$message.error('文件上传失败');
                    // 控制台打印错误
                    console.error(err);
                });
        },
        /**
         * 格式化日期和时间
         * value 日期和时间值
         */
        formatDate(value) {
            try {
                let date = new Date(value);
                let year = date.getFullYear() + '';
                let month = date.getMonth() + 1;
                let day = date.getDate();
                let hour = date.getHours();
                let minute = date.getMinutes();
                let second = date.getSeconds();
                month = month < 10 ? '0' + month : '' + month;
                day = day < 10 ? '0' + day : '' + day;
                hour = hour < 10 ? '0' + hour : '' + hour;
                minute = minute < 10 ? '0' + minute : '' + minute;
                second = second < 10 ? '0' + second : '' + second;
                // 日期和时间的格式 - 可自定义
                // 例如：yyyy年MM月dd日 hh时mm分ss秒、yyyy年MM月dd日 hh:mm:ss等
                let format = 'yyyy-MM-dd hh:mm:ss';
                format = format.replace(/yyyy/g, year);
                format = format.replace(/MM/g, month);
                format = format.replace(/dd/g, day);
                format = format.replace(/hh/g, hour);
                format = format.replace(/mm/g, minute);
                format = format.replace(/ss/g, second);
                return format;
            } catch (ex) {
                console.error(ex);
                return '';
            }
        },
        /**
         * 格式化文件大小
         * size 文件大小（单位：字节）
         */
        formatFileSize(size) {
            if (size == null || size == '') {
                return '0B';
            }
            let unitArr = new Array('B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB');
            let index = 0;
            let srcsize = parseFloat(size);
            index = Math.floor(Math.log(srcsize) / Math.log(1024));
            let sizes = srcsize / Math.pow(1024, index);
            sizes = sizes.toFixed(2);
            return sizes + unitArr[index];
        }
    }
};
</script>

<style lang="less" scoped>
.upload {
    margin: 1%;
}

.dtBtns {
    display: flex;
    justify-content: center;
    > div {
        margin: 0 1%;
    }
}

.dataTable {
    margin: 0 1%;
}

.btns {
    display: flex;
    justify-content: flex-end;
    margin: 2% 3%;
    > div {
        margin: 0 0.4%;
    }
}

.title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    padding: 1% 0;
    > div {
        margin: 0 0.5%;
    }
}

.bodys {
    margin: 0px;
    overflow-x: hidden;
}
</style>

需要修改的地方

1、oss客户端实例初始化
2、删除oss文件函数

结语

1、如有不懂或者疑问，可私信我，看到必回
2、此示例的数据表格 没有做分页处理，阿里云OSS官方没有直接给出 分页功能，但也通过 其他方式 可以实现
3、此示例为 纯前端实现，后端开发者也可以参考一下，实际开发也可以前后端结合实现
4、此示例中的 OSS文件操作相关代码 都是基于 官方文档复制 的，基本未作修改，仅供演示
5、具体使用，请参考官方文档

文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。

THE END

# Vue.js # Node.js