123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216 |
- <template>
- <div class="app-container">
- <doc-alert title="上传下载" url="https://doc.iocoder.cn/file/"/>
-
- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
- <el-form-item label="文件路径" prop="path">
- <el-input v-model="queryParams.path" placeholder="请输入文件路径" clearable @keyup.enter.native="handleQuery"/>
- </el-form-item>
- <el-form-item label="创建时间" prop="createTime">
- <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
- type="daterange"
- range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
- :default-time="['00:00:00', '23:59:59']"/>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
- <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
- </el-form-item>
- </el-form>
-
- <el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">上传文件</el-button>
- </el-col>
- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
- </el-row>
-
- <el-table v-loading="loading" :data="list">
- <el-table-column label="文件名" :show-overflow-tooltip="true" align="center" min-width="200px" prop="name"/>
- <el-table-column label="文件路径" :show-overflow-tooltip="true" align="center" min-width="250px" prop="path"/>
- <el-table-column label="文件 URL" :show-overflow-tooltip="true" align="center" min-width="300px" prop="url"/>
- <el-table-column label="文件大小" align="center" prop="size" min-width="120px" :formatter="sizeFormat"/>
- <el-table-column label="文件类型" :show-overflow-tooltip="true" align="center" prop="type" width="180px"/>
- <el-table-column label="文件内容" align="center" prop="content" min-width="150px">
- <template v-slot="scope">
- <image-preview v-if="scope.row.type&&scope.row.type.indexOf('image/') === 0" :src="scope.row.url"
- :width="'100px'"></image-preview>
- <video v-else-if="scope.row.type&&scope.row.type.indexOf('video/') === 0" :width="'100px'">
- <source :src="scope.row.url"/>
- </video>
- <i v-else>无法预览,点击
- <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" target="_blank"
- :href="getFileUrl + scope.row.configId + '/get/' + scope.row.path">下载
- </el-link>
- </i>
- </template>
- </el-table-column>
- <el-table-column label="上传时间" align="center" prop="createTime" min-width="170px">
- <template v-slot="scope">
- <span>{{ parseTime(scope.row.createTime) }}</span>
- </template>
- </el-table-column>
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="100px">
- <template v-slot="scope">
- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
- v-hasPermi="['infra:file:delete']">删除
- </el-button>
- </template>
- </el-table-column>
- </el-table>
-
- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
- @pagination="getList"/>
-
- <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
- <el-upload ref="upload" :limit="1" accept=".jpg, .png, .gif" :auto-upload="false" drag
- :headers="upload.headers" :action="upload.url" :data="upload.data" :disabled="upload.isUploading"
- :on-change="handleFileChange"
- :on-progress="handleFileUploadProgress"
- :on-success="handleFileSuccess">
- <i class="el-icon-upload"></i>
- <div class="el-upload__text">
- 将文件拖到此处,或 <em>点击上传</em>
- </div>
- <div class="el-upload__tip" style="color:red" slot="tip">提示:仅允许导入 jpg、png、gif 格式文件!</div>
- </el-upload>
- <div slot="footer" class="dialog-footer">
- <el-button type="primary" @click="submitFileForm">确 定</el-button>
- <el-button @click="upload.open = false">取 消</el-button>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- import {deleteFile, getFilePage} from "@/api/infra/file";
- import {getAccessToken} from "@/utils/auth";
- import ImagePreview from "@/components/ImagePreview";
- export default {
- name: "File",
- components: {
- ImagePreview
- },
- data() {
- return {
- getFileUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/',
-
- loading: true,
-
- showSearch: true,
-
- total: 0,
-
- list: [],
-
- title: "",
-
- queryParams: {
- pageNo: 1,
- pageSize: 10,
- path: null,
- type: null,
- createTime: []
- },
-
- upload: {
- open: false,
- title: "",
- isUploading: false,
- url: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload",
- headers: {Authorization: "Bearer " + getAccessToken()},
- data: {}
- },
- };
- },
- created() {
- this.getList();
- },
- methods: {
-
- getList() {
- this.loading = true;
-
- getFilePage(this.queryParams).then(response => {
- this.list = response.data.list;
- this.total = response.data.total;
- this.loading = false;
- });
- },
-
- cancel() {
- this.open = false;
- this.reset();
- },
-
- reset() {
- this.form = {
- content: undefined,
- };
- this.resetForm("form");
- },
-
- handleQuery() {
- this.queryParams.pageNo = 1;
- this.getList();
- },
-
- resetQuery() {
- this.resetForm("queryForm");
- this.handleQuery();
- },
-
- handleAdd() {
- this.upload.open = true;
- this.upload.title = "上传文件";
- },
-
- handleFileChange(file, fileList) {
- },
-
- handleFileUploadProgress(event, file, fileList) {
- this.upload.isUploading = true;
- },
-
- submitFileForm() {
- this.$refs.upload.submit();
- },
-
- handleFileSuccess(response, file, fileList) {
-
- this.upload.open = false;
- this.upload.isUploading = false;
- this.$refs.upload.clearFiles();
-
- this.$modal.msgSuccess("上传成功");
- this.getList();
- },
-
- handleDelete(row) {
- const id = row.id;
- this.$modal.confirm('是否确认删除文件编号为"' + id + '"的数据项?').then(function () {
- return deleteFile(id);
- }).then(() => {
- this.getList();
- this.$modal.msgSuccess("删除成功");
- }).catch(() => {
- });
- },
-
- sizeFormat(row, column) {
- const unitArr = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
- const srcSize = parseFloat(row.size);
- const index = Math.floor(Math.log(srcSize) / Math.log(1024));
- let size = srcSize / Math.pow(1024, index);
- size = size.toFixed(2);
- return size + ' ' + unitArr[index];
- },
- }
- };
- </script>
|