文件上传到oss上以及下载

<template>
    
    <div>
        <div style="margin-bottom: 10px; display: flex;">
            <Download name="下载模板" type="Url" url="https://file.wonder-link.net/%E6%89%B9%E9%87%8F%E6%B8%A0%E9%81%93%E5%8F%98%E6%9B%B4.xlsx">
                <dev-button type="primary">下载模板dev-button>
            Download>
            <el-upload
                :auto-upload="false"
                :on-change="(val: any) => {beforeUpload(val)}"
                :show-file-list="false"
            >
                <el-button type="primary">批量导入el-button>
            el-upload>
        div>
        <div style="padding-bottom: 30px;">
            <el-table
                v-loading="pageLoading"
                :data="tableData" 
                style="width: 100%"
                border
                :header-cell-style="{ background: '#eff3f6', textAlign: 'center' }"
            >
                <el-table-column prop="batchNo" label="批次号" />
                <el-table-column label="文件名称">
                    <template #default="scope">
                        {{ scope.row.fileName || '-' }}
                    template>
                el-table-column>
                <el-table-column label="处理状态">
                    <template #default="scope">
                        {{ scope.row.batchStatusDesc || '-' }}
                    template>
                el-table-column>
                <el-table-column label="操作人">
                    <template #default="scope">
                        {{ scope.row.createName || '-' }}
                    template>
                el-table-column>
                <el-table-column label="操作时间">
                    <template #default="scope">
                        {{ scope.row.createTime || '-' }}
                    template>
                el-table-column>
                <el-table-column fixed="right" label="操作" width="160" align="center">
                    <template #default="scope">
                        <dev-button type="primary" @click="() => getFileUrl(scope.row)" link>下载dev-button>
                        <dev-button v-if="scope.row.batchStatus == 'TO_PROCESS'" link type="primary" @click="passThrough(scope.row, 'pass')">通过dev-button>
                        <dev-button v-if="scope.row.batchStatus == 'TO_PROCESS'" link type="primary" @click="passThrough(scope.row, 'refuse')">拒绝dev-button>
                    template>
                el-table-column>
            el-table>
            <br>
            <div style="float: right;">
                <el-pagination 
                    v-model:current-page="params.pageNo"
                    v-model:page-size="params.pageSize"
                    :page-sizes="[10, 20, 30, 40]"
                    background 
                    layout="sizes, prev, pager, next" 
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            div>
        div>
        <ExportButton ref="exportButtonRef" :api="exportApi" :show-button="false" />
    div>
template>
<script setup lang='ts'>
import { reactive, ref, onMounted, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import OSS from 'ali-oss';
import {getOssConfig} from '@/api/noticeSettings/upLoadOss';
import {page_list, audit, download_detail, batch_change } from "@/api/operateMent/ChannelChanges";
import Download from '@/components/Download/index.vue';
import ExportButton from '@/components/ExportButton/index.vue';

const exportApi = download_detail;
const pageLoading = ref(false);
const total = ref(0);
const tableData = ref([]);
let params: any = reactive({
    batchNo: '',
    pageNo: 1,
    pageSize: 10,
});
const exportButtonRef = ref();
// 初始化
const init = () => {
    pageLoading.value = true;
    page_list(params).then((res: any) => {
        pageLoading.value = false;
        tableData.value = res.list;
        total.value = Number(res.total || 0)
    }).catch(() => {
        pageLoading.value = false;
    })
};
const passThrough = (row: any, type: string) => {
    ElMessageBox.confirm(
        `是否确认${type == 'pass' ? '通过' : '拒绝'}吗?`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        audit({batchNo: row.batchNo, audit: type == 'pass' ? 1 : 0, }).then(() => {
            ElMessage.success('操作成功');
            init();
        });
    });
};
const getFileUrl = (item: any) => {
    exportButtonRef.value.passiveExport({batchNo: item.batchNo});
};
onMounted(() => {
    init();
});
const handleSizeChange = (val: number) => {
    params.pageSize = val;
    init();
};
const handleCurrentChange = (val: number) => {
    params.pageNo = val;
    init();
};
const uploadFilledData = ref<any>({});
const client = ref();// oss信息
const beforeUpload = (file: any) => {
    const rawFile = file.raw;
    uploadFilledData.value = rawFile;
    getOssConfig().then((res: any) => {
        client.value = new OSS({
            region: res.region,
            accessKeyId: res.accessKeyId,
            accessKeySecret: res.accessKeySecret,
            stsToken: res.securityToken,
            bucket: res.bucket// 填写Bucket名称。
        });
        nextTick(() => {
            startUploading();
        });
        return true;
    }).catch(()=>{
        window.$message.error('获取oss信息失败');
        return false;
    });
};
const uploadResults = ref<any>({});// 上传结果
// 获取文件名称后缀
const getFileName = (fileName: string) => {
    const arr = fileName.split('.');
    return arr[arr.length - 1];
};
// 去除文件后缀
const removeSuffix = (fileName: string) => {
    const arr = fileName.split('.');
    return arr[0];
};
const startUploading = async () => {
    try {
        // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
        // 您可以通过自定义文件名（例如exampleobject.txt）或文件完整路径（例如exampledir/exampleobject.txt）的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
        // data对象可以自定义为file对象、Blob数据或者OSS Buffer。
        const suffix = getFileName(uploadFilledData.value.name); // 文件后缀
        const fileName = removeSuffix(uploadFilledData.value.name) + new Date().getTime() + '.' + suffix;
        const result = await client.value.put(
            fileName,
            uploadFilledData.value,
        );
        uploadResults.value = result;
        let obj = {
            fileName: result.name,
            filePath: result.url,
        }
        batch_change(obj).then(() => {
            window.$message.success('上传成功');
            init();
        }).catch(() => {
            window.$message.error('上传失败');
        })
    } catch (e) {
        window.$message.error('上传失败');
    }
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189