update 完成OSS模块页面功能

This commit is contained in:
疯狂的狮子li
2021-07-20 17:26:20 +08:00
parent a4c019ace2
commit ed197ce7ac
10 changed files with 107 additions and 64 deletions

View File

@ -9,23 +9,6 @@ export function listOss(query) {
})
}
// 上传OSS云存储
export function addOss(data) {
return request({
url: '/system/oss/upload',
method: 'post',
data: data
})
}
// 下载OSS云存储
export function downloadOss(ossId) {
return request({
url: '/system/oss/download/' + ossId,
method: 'get'
})
}
// 删除OSS云存储
export function delOss(ossId) {
return request({

View File

@ -54,7 +54,7 @@ export default {
},
data() {
return {
uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
uploadUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传的图片服务器地址
headers: {
Authorization: "Bearer " + getToken()
},

View File

@ -27,7 +27,7 @@
<!-- 文件列表 -->
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
<el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
<el-link :href="`${file.url}`" :underline="false" target="_blank">
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link>
<div class="ele-upload-list__item-content-action">
@ -70,7 +70,7 @@ export default {
data() {
return {
baseUrl: process.env.VUE_APP_BASE_API,
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
uploadFileUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传的图片服务器地址
headers: {
Authorization: "Bearer " + getToken(),
},

View File

@ -74,7 +74,7 @@ export default {
dialogVisible: false,
hideUpload: false,
baseUrl: process.env.VUE_APP_BASE_API,
uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
uploadImgUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传的图片服务器地址
headers: {
Authorization: "Bearer " + getToken(),
},
@ -90,11 +90,7 @@ export default {
// 然后将数组转为对象数组
this.fileList = list.map(item => {
if (typeof item === "string") {
if (item.indexOf(this.baseUrl) === -1) {
item = { name: this.baseUrl + item, url: this.baseUrl + item };
} else {
item = { name: item, url: item };
}
item = { name: item, url: item };
}
return item;
});
@ -122,7 +118,7 @@ export default {
},
// 上传成功回调
handleUploadSuccess(res) {
this.fileList.push({ name: res.data.fileName, url: res.data.fileName });
this.fileList.push({ name: res.data.fileName, url: res.data.url });
this.$emit("input", this.listToString(this.fileList));
this.loading.close();
},

View File

@ -0,0 +1,33 @@
import axios from 'axios'
import { getToken } from '@/utils/auth'
const mimeMap = {
oss: 'application/octet-stream'
}
const baseUrl = process.env.VUE_APP_BASE_API
export function downLoadOss(ossId, filename) {
var url = baseUrl + '/system/oss/download/' + ossId
axios({
method: 'get',
url: url,
responseType: 'blob',
headers: { 'Authorization': 'Bearer ' + getToken() }
}).then(res => {
resolveBlob(res, mimeMap.oss, filename)
})
}
/**
* 解析blob响应内容并下载
* @param {*} res blob响应内容
* @param {String} mimeType MIME类型
*/
export function resolveBlob(res, mimeType, filename) {
const aLink = document.createElement('a')
var blob = new Blob([res.data], { type: mimeType })
aLink.href = URL.createObjectURL(blob)
aLink.setAttribute('download', filename) // 设置下载文件名称
document.body.appendChild(aLink)
aLink.click()
document.body.removeChild(aLink);
}

View File

@ -71,9 +71,19 @@
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
@click="handleFile"
v-hasPermi="['system:oss:upload']"
>上传</el-button>
>上传文件</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleImage"
v-hasPermi="['system:oss:upload']"
>上传图片</el-button>
</el-col>
<el-col :span="1.5">
<el-button
@ -94,8 +104,16 @@
<el-table-column label="云存储主键" align="center" prop="ossId" v-if="false"/>
<el-table-column label="文件名" align="center" prop="fileName" />
<el-table-column label="原名" align="center" prop="originalName" />
<el-table-column label="文件后缀" align="center" prop="fileSuffix" />
<el-table-column label="URL地址" align="center" prop="url" />
<el-table-column label="文件后缀" align="center" prop="fileSuffix" />
<el-table-column label="文件展示" align="center" prop="url" >
<template slot-scope="scope">
<el-image
v-if="scope.row.fileSuffix.indexOf('png','jpg','jpeg') > 0"
style="width: 100px; height: 100px;"
:src="scope.row.url"
:preview-src-list="[scope.row.url]"/>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
@ -135,7 +153,8 @@
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="文件名">
<imageUpload v-model="form.file"/>
<fileUpload v-model="form.file" v-if="type === 0"/>
<imageUpload v-model="form.file" v-if="type === 1"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@ -147,7 +166,8 @@
</template>
<script>
import { listOss, delOss, addOss, downloadOss } from "@/api/system/oss";
import { listOss, delOss } from "@/api/system/oss";
import { downLoadOss } from "@/utils/ossdownload";
export default {
name: "Oss",
@ -173,6 +193,8 @@ export default {
ossList: [],
// 弹出层标题
title: "",
// 弹出层标题
type: 0,
// 是否显示弹出层
open: false,
// 创建时间时间范围
@ -225,17 +247,7 @@ export default {
// 表单重置
reset() {
this.form = {
ossId: undefined,
file: undefined,
fileName: undefined,
originalName: undefined,
fileSuffix: undefined,
url: undefined,
createTime: undefined,
createBy: undefined,
updateTime: undefined,
updateBy: undefined,
service: undefined
};
this.resetForm("form");
},
@ -256,26 +268,28 @@ export default {
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
/** 文件按钮操作 */
handleFile() {
this.reset();
this.open = true;
this.title = "上传OSS云存储";
this.title = "上传文件";
this.type = 0;
},
/** 图片按钮操作 */
handleImage() {
this.reset();
this.open = true;
this.title = "上传图片";
this.type = 1;
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.buttonLoading = true;
addOss(this.form).then(response => {
this.msgSuccess("上传成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
});
this.open = false;
this.getList();
},
/** 下载按钮操作 */
handleDownload(row) {
downLoadOss(row.ossId, row.originalName)
},
/** 删除按钮操作 */
handleDelete(row) {