更新
This commit is contained in:
parent
46664b5b7f
commit
7fc1979928
4
.env.dev
4
.env.dev
@ -5,8 +5,8 @@ ENV = 'development'
|
|||||||
VUE_APP_TITLE = "车联通"后台管理系统
|
VUE_APP_TITLE = "车联通"后台管理系统
|
||||||
|
|
||||||
# 芋道管理系统/开发环境
|
# 芋道管理系统/开发环境
|
||||||
# VUE_APP_BASE_API = 'http://localhost:48080'
|
VUE_APP_BASE_API = 'http://localhost:48080'
|
||||||
VUE_APP_BASE_API = 'http://122.51.230.86:48080'
|
#VUE_APP_BASE_API = 'http://122.51.230.86:48080'
|
||||||
# 附件请求地址前缀
|
# 附件请求地址前缀
|
||||||
# VUE_APP_FILE_API = 'https://www.nuoyunr.com/minio/'
|
# VUE_APP_FILE_API = 'https://www.nuoyunr.com/minio/'
|
||||||
VUE_APP_FILE_API = 'http://122.51.230.86:9000/'
|
VUE_APP_FILE_API = 'http://122.51.230.86:9000/'
|
||||||
|
@ -50,6 +50,7 @@
|
|||||||
"bpmn-js-token-simulation": "0.10.0",
|
"bpmn-js-token-simulation": "0.10.0",
|
||||||
"clipboard": "2.0.8",
|
"clipboard": "2.0.8",
|
||||||
"core-js": "^3.26.0",
|
"core-js": "^3.26.0",
|
||||||
|
"cos-js-sdk-v5": "^1.8.7",
|
||||||
"crypto-js": "^4.0.0",
|
"crypto-js": "^4.0.0",
|
||||||
"dayjs": "^1.11.12",
|
"dayjs": "^1.11.12",
|
||||||
"echarts": "^5.4.0",
|
"echarts": "^5.4.0",
|
||||||
|
@ -1,26 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="upload-file">
|
<div class="upload-file">
|
||||||
<el-upload
|
<el-upload
|
||||||
multiple
|
multiple
|
||||||
:action="uploadFileUrl"
|
:action="uploadFileUrl"
|
||||||
:before-upload="handleBeforeUpload"
|
:before-upload="handleBeforeUpload"
|
||||||
:file-list="fileList"
|
:file-list="fileList"
|
||||||
:limit="limit"
|
:limit="limit"
|
||||||
:on-error="handleUploadError"
|
:on-error="handleUploadError"
|
||||||
:on-exceed="handleExceed"
|
:on-exceed="handleExceed"
|
||||||
:on-success="handleUploadSuccess"
|
:on-success="handleUploadSuccess"
|
||||||
:show-file-list="false"
|
:show-file-list="false"
|
||||||
:headers="headers"
|
:headers="headers"
|
||||||
class="upload-file-uploader"
|
class="upload-file-uploader"
|
||||||
ref="fileUpload"
|
ref="fileUpload"
|
||||||
>
|
>
|
||||||
<!-- 上传按钮 -->
|
<!-- 上传按钮 -->
|
||||||
<el-button size="mini" type="primary">选取文件</el-button>
|
<el-button size="mini" type="primary">选取文件</el-button>
|
||||||
<!-- 上传提示 -->
|
<!-- 上传提示 -->
|
||||||
<div class="el-upload__tip" slot="tip" v-if="showTip">
|
<div class="el-upload__tip" slot="tip" v-if="showTip">
|
||||||
请上传
|
请上传
|
||||||
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
|
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
|
||||||
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
|
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b></template>
|
||||||
的文件
|
的文件
|
||||||
</div>
|
</div>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
@ -40,7 +40,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getAccessToken } from "@/utils/auth";
|
import {getAccessToken} from "@/utils/auth";
|
||||||
|
import cos from "@/utils/cos";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "FileUpload",
|
name: "FileUpload",
|
||||||
@ -60,7 +61,7 @@ export default {
|
|||||||
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||||||
fileType: {
|
fileType: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => ["doc", "xls", "ppt", "txt", "pdf","mp4","png","jpg","zip","rar","jpeg","xlsx","docx"],
|
default: () => ["doc", "xls", "ppt", "txt", "pdf", "mp4", "png", "jpg", "zip", "rar", "jpeg", "xlsx", "docx"],
|
||||||
},
|
},
|
||||||
// 是否显示提示
|
// 是否显示提示
|
||||||
isShowTip: {
|
isShowTip: {
|
||||||
@ -75,8 +76,10 @@ export default {
|
|||||||
viewFileUrl: process.env.VUE_APP_FILE_API,
|
viewFileUrl: process.env.VUE_APP_FILE_API,
|
||||||
baseUrl: process.env.VUE_APP_BASE_API,
|
baseUrl: process.env.VUE_APP_BASE_API,
|
||||||
uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
|
uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
|
||||||
headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
|
headers: {Authorization: "Bearer " + getAccessToken()}, // 设置上传的请求头部
|
||||||
fileList: [],
|
fileList: [],
|
||||||
|
uploadProgress: 0,
|
||||||
|
totalUploadCount: 0,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@ -89,7 +92,12 @@ export default {
|
|||||||
// 然后将数组转为对象数组
|
// 然后将数组转为对象数组
|
||||||
this.fileList = list.map(item => {
|
this.fileList = list.map(item => {
|
||||||
if (typeof item === "string") {
|
if (typeof item === "string") {
|
||||||
item = { name: item, url: this.viewFileUrl+item };
|
//如果包含http不拼接viewFileUrl
|
||||||
|
if (item.includes('http')) {
|
||||||
|
item = {name: item, url: item};
|
||||||
|
} else {
|
||||||
|
item = {name: item, url: this.viewFileUrl + item};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
item.uid = item.uid || new Date().getTime() + temp++;
|
item.uid = item.uid || new Date().getTime() + temp++;
|
||||||
return item;
|
return item;
|
||||||
@ -111,35 +119,80 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 上传前校检格式和大小
|
// 上传前校检格式和大小
|
||||||
handleBeforeUpload(file) {
|
async handleBeforeUpload(file) {
|
||||||
// 校检文件类型
|
|
||||||
if (this.fileType) {
|
|
||||||
let fileExtension = "";
|
|
||||||
if (file.name.lastIndexOf(".") > -1) {
|
|
||||||
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
|
|
||||||
}
|
|
||||||
const isTypeOk = this.fileType.some((type) => {
|
|
||||||
if (file.type.indexOf(type) > -1) return true;
|
|
||||||
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
if (!isTypeOk) {
|
|
||||||
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 校检文件大小
|
|
||||||
if (this.fileSize) {
|
|
||||||
const isLt = file.size / 1024 / 1024 < this.fileSize;
|
|
||||||
if (!isLt) {
|
|
||||||
this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.$modal.loading("正在上传文件,请稍候...");
|
this.$modal.loading("正在上传文件,请稍候...");
|
||||||
this.number++;
|
try {
|
||||||
return true;
|
this.totalUploadCount += 1
|
||||||
|
console.log('开始上传:', file);
|
||||||
|
const fileKey = `uploads/${Date.now()}_${file.name}`; // 防止重名
|
||||||
|
|
||||||
|
const data = await cos.uploadFile({
|
||||||
|
Bucket: 'lanan-1319802091',
|
||||||
|
Region: 'ap-chengdu',
|
||||||
|
Key: fileKey,
|
||||||
|
Body: file,
|
||||||
|
SliceSize: 1024 * 1024 * 5, // 5MB 触发分块上传
|
||||||
|
onProgress: progressData => {
|
||||||
|
console.log('上传进度:', progressData);
|
||||||
|
},
|
||||||
|
onTaskReady: id => {
|
||||||
|
this.taskId = id;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// 上传成功后手动更新 fileList
|
||||||
|
this.fileList.push({
|
||||||
|
name: file.name,
|
||||||
|
url: `https://${data.Location}` // 腾讯云返回的 URL
|
||||||
|
});
|
||||||
|
console.log('fileList:', this.fileList)
|
||||||
|
|
||||||
|
console.log('上传成功:', data);
|
||||||
|
this.uploadProgress++
|
||||||
|
if (this.uploadProgress === this.totalUploadCount) {
|
||||||
|
this.$message.success('上传成功');
|
||||||
|
this.uploadProgress = 0;
|
||||||
|
this.totalUploadCount = 0
|
||||||
|
this.$modal.closeLoading();
|
||||||
|
// 手动调用上传成功处理
|
||||||
|
this.uploadedSuccessfully();
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('上传失败:', error);
|
||||||
|
this.$modal.closeLoading();
|
||||||
|
}
|
||||||
|
|
||||||
|
return false; // 阻止 el-upload 默认上传
|
||||||
},
|
},
|
||||||
|
// handleBeforeUpload(file) {
|
||||||
|
// // 校检文件类型
|
||||||
|
// if (this.fileType) {
|
||||||
|
// let fileExtension = "";
|
||||||
|
// if (file.name.lastIndexOf(".") > -1) {
|
||||||
|
// fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
|
||||||
|
// }
|
||||||
|
// const isTypeOk = this.fileType.some((type) => {
|
||||||
|
// if (file.type.indexOf(type) > -1) return true;
|
||||||
|
// if (fileExtension && fileExtension.indexOf(type) > -1) return true;
|
||||||
|
// return false;
|
||||||
|
// });
|
||||||
|
// if (!isTypeOk) {
|
||||||
|
// this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// // 校检文件大小
|
||||||
|
// if (this.fileSize) {
|
||||||
|
// const isLt = file.size / 1024 / 1024 < this.fileSize;
|
||||||
|
// if (!isLt) {
|
||||||
|
// this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// this.$modal.loading("正在上传文件,请稍候...");
|
||||||
|
// this.number++;
|
||||||
|
// return true;
|
||||||
|
// },
|
||||||
// 文件个数超出
|
// 文件个数超出
|
||||||
handleExceed() {
|
handleExceed() {
|
||||||
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
|
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
|
||||||
@ -153,7 +206,7 @@ export default {
|
|||||||
handleUploadSuccess(res, file) {
|
handleUploadSuccess(res, file) {
|
||||||
if (res.code === 0) {
|
if (res.code === 0) {
|
||||||
// edit by 芋道源码
|
// edit by 芋道源码
|
||||||
this.uploadList.push({ name: res.data, url: res.data });
|
this.uploadList.push({name: res.data, url: res.data});
|
||||||
this.uploadedSuccessfully();
|
this.uploadedSuccessfully();
|
||||||
} else {
|
} else {
|
||||||
this.number--;
|
this.number--;
|
||||||
@ -170,20 +223,17 @@ export default {
|
|||||||
},
|
},
|
||||||
// 上传结束处理
|
// 上传结束处理
|
||||||
uploadedSuccessfully() {
|
uploadedSuccessfully() {
|
||||||
if (this.number > 0 && this.uploadList.length === this.number) {
|
console.log('这是上传结束')
|
||||||
this.fileList = this.fileList.concat(this.uploadList);
|
console.log('看不看')
|
||||||
this.uploadList = [];
|
this.$emit("input", this.listToString(this.fileList));
|
||||||
this.number = 0;
|
this.$modal.closeLoading();
|
||||||
this.$emit("input", this.listToString(this.fileList));
|
|
||||||
this.$modal.closeLoading();
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
// 获取文件名称
|
// 获取文件名称
|
||||||
getFileName(name) {
|
getFileName(name) {
|
||||||
if (name.lastIndexOf("/") > -1) {
|
if (name.lastIndexOf("/") > -1) {
|
||||||
return name.slice(name.lastIndexOf("/") + 1);
|
return name.slice(name.lastIndexOf("/") + 1);
|
||||||
} else {
|
} else {
|
||||||
return "";
|
return name;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 对象转成指定字符串分隔
|
// 对象转成指定字符串分隔
|
||||||
@ -203,18 +253,21 @@ export default {
|
|||||||
.upload-file-uploader {
|
.upload-file-uploader {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-file-list .el-upload-list__item {
|
.upload-file-list .el-upload-list__item {
|
||||||
border: 1px solid #e4e7ed;
|
border: 1px solid #e4e7ed;
|
||||||
line-height: 2;
|
line-height: 2;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-file-list .ele-upload-list__item-content {
|
.upload-file-list .ele-upload-list__item-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ele-upload-list__item-content-action .el-link {
|
.ele-upload-list__item-content-action .el-link {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
40
src/utils/cos.js
Normal file
40
src/utils/cos.js
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import COS from 'cos-js-sdk-v5';
|
||||||
|
import request from '@/utils/request'; // 引入你的封装请求方法
|
||||||
|
const cos = new COS({
|
||||||
|
// 其他配置项可参考下方 初始化配置项
|
||||||
|
// getAuthorization 必选参数
|
||||||
|
getAuthorization: function (options, callback) {
|
||||||
|
// 初始化时不会调用,只有调用 cos 方法(例如 cos.putObject)时才会进入
|
||||||
|
// 异步获取临时密钥
|
||||||
|
// 服务端 JS 示例:https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/
|
||||||
|
// 服务端其他语言参考 COS STS SDK :https://github.com/tencentyun/qcloud-cos-sts-sdk
|
||||||
|
// STS 详细文档指引看:https://cloud.tencent.com/document/product/436/14048
|
||||||
|
const stsUrl = '/cos/sts'; // 使用相对路径,避免本地开发跨域问题
|
||||||
|
request({
|
||||||
|
url: stsUrl,
|
||||||
|
method: 'GET'
|
||||||
|
}).then(response => {
|
||||||
|
console.log('执行了')
|
||||||
|
const data = response; // 适配你的 request 返回格式
|
||||||
|
if (!data || !data.credentials) {
|
||||||
|
return console.error('credentials invalid:\n' + JSON.stringify(data, null, 2));
|
||||||
|
}
|
||||||
|
|
||||||
|
const {credentials} = data;
|
||||||
|
|
||||||
|
callback({
|
||||||
|
TmpSecretId: credentials.tmpSecretId,
|
||||||
|
TmpSecretKey: credentials.tmpSecretKey,
|
||||||
|
SecurityToken: credentials.sessionToken,
|
||||||
|
StartTime: data.startTime, // 时间戳,单位秒
|
||||||
|
ExpiredTime: data.expiredTime, // 时间戳,单位秒
|
||||||
|
ScopeLimit: true // 细粒度控制权限需要设为 true
|
||||||
|
});
|
||||||
|
|
||||||
|
}).catch(error => {
|
||||||
|
console.error('获取临时密钥失败', error);
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
export default cos;
|
35
src/utils/cosUpload.js
Normal file
35
src/utils/cosUpload.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import cos from '@/utils/cos';
|
||||||
|
|
||||||
|
let taskId;
|
||||||
|
// 上传文件,file为选择的文件
|
||||||
|
async function upload(file) {
|
||||||
|
try {
|
||||||
|
const data = await cos.uploadFile({
|
||||||
|
Bucket: 'lanan-1319802091', // 填写自己的 bucket,必须字段
|
||||||
|
Region: 'ap-chengdu', // 存储桶所在地域,必须字段
|
||||||
|
Key: '1.jpg', // 存储在桶里的对象键(例如1.jpg,a/b/test.txt),必须字段
|
||||||
|
Body: file, // 上传文件对象
|
||||||
|
SliceSize: 1024 * 1024 * 5, // 触发分块上传的阈值,超过5MB 使用分块上传,小于5MB使用简单上传。可自行设置,非必须
|
||||||
|
onProgress: function(progressData) {
|
||||||
|
console.log('上传进度:', progressData);
|
||||||
|
},
|
||||||
|
onTaskReady: function(id) { // 非必须
|
||||||
|
taskId = id;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
console.log('上传成功', data);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('上传失败', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听上传队列
|
||||||
|
cos.on('update-list', data => {
|
||||||
|
console.log(data);
|
||||||
|
});
|
||||||
|
// 暂停上传任务
|
||||||
|
cos.pauseTask(taskId);
|
||||||
|
// 重启上传任务
|
||||||
|
cos.restartTask(taskId);
|
||||||
|
// 取消上传任务
|
||||||
|
cos.cancelTask(taskId)
|
@ -261,10 +261,10 @@ export default {
|
|||||||
}
|
}
|
||||||
this.loginForm.captchaVerification = captchaParams.captchaVerification
|
this.loginForm.captchaVerification = captchaParams.captchaVerification
|
||||||
//获取当前登陆人的租户
|
//获取当前登陆人的租户
|
||||||
// await getUserTenant(this.loginForm).then(res => {
|
await getUserTenant(this.loginForm).then(res => {
|
||||||
// console.log('当前登陆人信息', res)
|
console.log('当前登陆人信息', res)
|
||||||
// setTenantId(res.data.tenant_id)
|
setTenantId(res.data.tenant_id)
|
||||||
// });
|
});
|
||||||
// 发起登陆
|
// 发起登陆
|
||||||
// console.log("发起登录", this.loginForm);
|
// console.log("发起登录", this.loginForm);
|
||||||
this.$store.dispatch(this.loginForm.loginType === "sms" ? "SmsLogin" : "Login", this.loginForm).then(() => {
|
this.$store.dispatch(this.loginForm.loginType === "sms" ? "SmsLogin" : "Login", this.loginForm).then(() => {
|
||||||
|
@ -69,7 +69,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-if="item.type == 2">
|
<div v-if="item.type == 2">
|
||||||
<img src="../../../assets/images/wenjian.png" style="width: 100px;height: 100px;" v-if="!item.isImage">
|
<img src="../../../assets/images/wenjian.png" style="width: 100px;height: 100px;" v-if="!item.isImage">
|
||||||
<img :src="imageUrl + item.filePath" style="width: 100px;height: 100px;" v-else>
|
<img :src="item.filePath.includes('http') ? item.filePath : imageUrl + item.filePath"
|
||||||
|
style="width: 100px;height: 100px;" v-else>
|
||||||
|
|
||||||
<div>{{ item.fileName }}</div>
|
<div>{{ item.fileName }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bjandshanchu">
|
<div class="bjandshanchu">
|
||||||
@ -113,7 +115,12 @@
|
|||||||
class="preview-iframe" v-if="!isImage && selectFile.fileType != 'txt' && !isAudioType && selectFile.fileType != 'pdf'"
|
class="preview-iframe" v-if="!isImage && selectFile.fileType != 'txt' && !isAudioType && selectFile.fileType != 'pdf'"
|
||||||
>
|
>
|
||||||
</iframe>
|
</iframe>
|
||||||
<image-preview class="preview-iframe" :src="imageUrl + selectFile.filePath" v-if="isImage"></image-preview>
|
<image-preview
|
||||||
|
class="preview-iframe"
|
||||||
|
:src="selectFile.filePath.includes('http') ? selectFile.filePath : imageUrl + selectFile.filePath"
|
||||||
|
v-if="isImage">
|
||||||
|
</image-preview>
|
||||||
|
|
||||||
<iframe
|
<iframe
|
||||||
:src="imageUrl + selectFile.filePath"
|
:src="imageUrl + selectFile.filePath"
|
||||||
frameborder="0"
|
frameborder="0"
|
||||||
@ -208,13 +215,14 @@
|
|||||||
<el-form ref="formBatch" :model="form" :rules="rules" label-width="120px">
|
<el-form ref="formBatch" :model="form" :rules="rules" label-width="120px">
|
||||||
<el-form-item label="文件路径" prop="fileList">
|
<el-form-item label="文件路径" prop="fileList">
|
||||||
<el-upload
|
<el-upload
|
||||||
|
action=""
|
||||||
class="upload-demo"
|
class="upload-demo"
|
||||||
:action="uploadFileUrl"
|
|
||||||
multiple
|
multiple
|
||||||
|
|
||||||
:on-error="handleUploadError"
|
:on-error="handleUploadError"
|
||||||
:on-exceed="handleExceed"
|
:on-exceed="handleExceed"
|
||||||
:on-success="handleUploadSuccess"
|
:on-success="handleUploadSuccess"
|
||||||
:before-upload="handleBeforeUpload"
|
:before-upload="handleUpload"
|
||||||
:headers="headers"
|
:headers="headers"
|
||||||
:file-list="fileList">
|
:file-list="fileList">
|
||||||
<el-button size="small" type="primary">点击上传</el-button>
|
<el-button size="small" type="primary">点击上传</el-button>
|
||||||
@ -229,7 +237,9 @@
|
|||||||
placeholder="请选择提醒时间">
|
placeholder="请选择提醒时间">
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<!-- 上传进度 -->
|
||||||
</el-form>
|
</el-form>
|
||||||
|
<!-- <el-progress v-if="uploadProgress !== null" :percentage="uploadProgress" />-->
|
||||||
<div slot="footer" class="dialog-footer">
|
<div slot="footer" class="dialog-footer">
|
||||||
<el-button type="primary" @click="submitBatchForm">确 定</el-button>
|
<el-button type="primary" @click="submitBatchForm">确 定</el-button>
|
||||||
<el-button @click="cancelBatch">取 消</el-button>
|
<el-button @click="cancelBatch">取 消</el-button>
|
||||||
@ -254,13 +264,16 @@ import {
|
|||||||
} from "../api/file";
|
} from "../api/file";
|
||||||
import inspFileUpload from '@/components/FileUpload/index.vue'
|
import inspFileUpload from '@/components/FileUpload/index.vue'
|
||||||
import {getAccessToken} from "@/utils/auth";
|
import {getAccessToken} from "@/utils/auth";
|
||||||
|
// import cos from "@/utils/cosUpload"
|
||||||
|
import cos from "@/utils/cos"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "InspectionFile",
|
name: "InspectionFile",
|
||||||
components: {inspFileUpload},
|
components: {inspFileUpload},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/uploadDetail",
|
uploadProgress:0,
|
||||||
|
uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/cosUpload",
|
||||||
imageUrl: process.env.VUE_APP_FILE_API,
|
imageUrl: process.env.VUE_APP_FILE_API,
|
||||||
previewUrl: process.env.VUE_APP_PREVIEW_URL,
|
previewUrl: process.env.VUE_APP_PREVIEW_URL,
|
||||||
// 遮罩层
|
// 遮罩层
|
||||||
@ -290,10 +303,12 @@ export default {
|
|||||||
openBatch: false,
|
openBatch: false,
|
||||||
// 是否显示弹出层(分配权限)
|
// 是否显示弹出层(分配权限)
|
||||||
isShow: false,
|
isShow: false,
|
||||||
|
taskId: null,
|
||||||
// 提醒时间时间范围
|
// 提醒时间时间范围
|
||||||
daterangeWarnTime: [],
|
daterangeWarnTime: [],
|
||||||
number: 0,
|
number: 0,
|
||||||
uploadList: [],
|
uploadList: [],
|
||||||
|
totalUploadCount: 0,
|
||||||
// 查询参数
|
// 查询参数
|
||||||
queryParams: {
|
queryParams: {
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
@ -374,7 +389,9 @@ export default {
|
|||||||
//预览文件
|
//预览文件
|
||||||
preview(item) {
|
preview(item) {
|
||||||
console.log('预览文件地址', this.previewUrl)
|
console.log('预览文件地址', this.previewUrl)
|
||||||
this.fileUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + this.previewUrl + item.filePath
|
this.fileUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' +
|
||||||
|
(item.filePath.includes('http') ? item.filePath : this.previewUrl + item.filePath);
|
||||||
|
|
||||||
// this.fileUrl = 'https://view.xdocin.com/view?src=' + this.imageUrl + item.filePath
|
// this.fileUrl = 'https://view.xdocin.com/view?src=' + this.imageUrl + item.filePath
|
||||||
console.log(this.fileUrl)
|
console.log(this.fileUrl)
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
@ -493,6 +510,11 @@ export default {
|
|||||||
downloadFile(item) {
|
downloadFile(item) {
|
||||||
// 创建一个 <a> 元素
|
// 创建一个 <a> 元素
|
||||||
// const link = document.createElement('a');
|
// const link = document.createElement('a');
|
||||||
|
// 判断filePath中是否包含http
|
||||||
|
if (item.filePath.includes('http')) {
|
||||||
|
window.open(item.filePath);
|
||||||
|
return;
|
||||||
|
}
|
||||||
let href = "https://www.nuoyunr.com/minio/" + item.filePath; // 文件路径
|
let href = "https://www.nuoyunr.com/minio/" + item.filePath; // 文件路径
|
||||||
// var lastIndexOf = item.filePath.lastIndexOf(".");
|
// var lastIndexOf = item.filePath.lastIndexOf(".");
|
||||||
// link.download = item.fileName+item.filePath.substr(lastIndexOf); // 下载的文件名
|
// link.download = item.fileName+item.filePath.substr(lastIndexOf); // 下载的文件名
|
||||||
@ -593,6 +615,7 @@ export default {
|
|||||||
/** 提交按钮 */
|
/** 提交按钮 */
|
||||||
submitForm() {
|
submitForm() {
|
||||||
this.$refs["form"].validate(valid => {
|
this.$refs["form"].validate(valid => {
|
||||||
|
console.log(this.form, '内容')
|
||||||
if (!this.form.filePath && this.form.type == "2") {
|
if (!this.form.filePath && this.form.type == "2") {
|
||||||
this.$modal.msgError("请上传文件");
|
this.$modal.msgError("请上传文件");
|
||||||
return false;
|
return false;
|
||||||
@ -683,35 +706,172 @@ export default {
|
|||||||
}, `inspectionFile_${new Date().getTime()}.xlsx`)
|
}, `inspectionFile_${new Date().getTime()}.xlsx`)
|
||||||
},
|
},
|
||||||
// 上传前校检格式和大小
|
// 上传前校检格式和大小
|
||||||
|
// handleBeforeUpload(file) {
|
||||||
|
// // 校检文件类型
|
||||||
|
// if (this.fileType) {
|
||||||
|
// let fileExtension = "";
|
||||||
|
// if (file.name.lastIndexOf(".") > -1) {
|
||||||
|
// fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
|
||||||
|
// }
|
||||||
|
// const isTypeOk = this.fileType.some((type) => {
|
||||||
|
// if (file.type.indexOf(type) > -1) return true;
|
||||||
|
// if (fileExtension && fileExtension.indexOf(type) > -1) return true;
|
||||||
|
// return false;
|
||||||
|
// });
|
||||||
|
// if (!isTypeOk) {
|
||||||
|
// this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// // 校检文件大小
|
||||||
|
// if (this.fileSize) {
|
||||||
|
// const isLt = file.size / 1024 / 1024 < this.fileSize;
|
||||||
|
// if (!isLt) {
|
||||||
|
// this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// this.$modal.loading("正在上传文件,请稍候...");
|
||||||
|
// this.number++;
|
||||||
|
// return true;
|
||||||
|
// },
|
||||||
|
// 处理文件上传
|
||||||
handleBeforeUpload(file) {
|
handleBeforeUpload(file) {
|
||||||
// 校检文件类型
|
return new Promise((resolve, reject) => {
|
||||||
if (this.fileType) {
|
this.$nextTick(() => {
|
||||||
let fileExtension = "";
|
|
||||||
if (file.name.lastIndexOf(".") > -1) {
|
this.uploadProgress = 0; // 初始化进度条
|
||||||
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
|
console.log("uploadProgress:", this.uploadProgress)
|
||||||
}
|
|
||||||
const isTypeOk = this.fileType.some((type) => {
|
|
||||||
if (file.type.indexOf(type) > -1) return true;
|
|
||||||
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
|
|
||||||
return false;
|
|
||||||
});
|
});
|
||||||
if (!isTypeOk) {
|
// 生成 COS 上传路径
|
||||||
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
|
const fileName = `${Date.now()}_${file.name}`;
|
||||||
return false;
|
const uploadPath = `files/${fileName}`; // 自定义 COS 存储路径
|
||||||
}
|
|
||||||
}
|
// 腾讯云 COS SDK 上传
|
||||||
// 校检文件大小
|
cos.putObject(
|
||||||
if (this.fileSize) {
|
{
|
||||||
const isLt = file.size / 1024 / 1024 < this.fileSize;
|
Bucket: "lanan-1319802091",
|
||||||
if (!isLt) {
|
Region: "ap-chengdu",
|
||||||
this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
|
Key: uploadPath,
|
||||||
return false;
|
Body: file,
|
||||||
}
|
onProgress: (progressData) => {
|
||||||
}
|
// console.log("上传进度:", progressData);
|
||||||
this.$modal.loading("正在上传文件,请稍候...");
|
this.$nextTick(() => {
|
||||||
this.number++;
|
this.uploadProgress = Math.round(progressData.percent * 100); // 更新进度
|
||||||
return true;
|
console.log("uploadProgress2:", this.uploadProgress)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
(err, data) => {
|
||||||
|
this.$modal.closeLoading();
|
||||||
|
this.uploadProgress = null; // 上传完成后隐藏进度条
|
||||||
|
if (err) {
|
||||||
|
this.$message.error("上传失败:" + err.message);
|
||||||
|
return reject();
|
||||||
|
}
|
||||||
|
this.$message.success("上传成功:" + data.Location);
|
||||||
|
this.fileList.push({ name: file.name, url: data.Location });
|
||||||
|
resolve();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
// 直接使用 cos-js-sdk 进行上传
|
||||||
|
async uploadToCOS({ file }) {
|
||||||
|
const fileName = `files/${file.name}`; // 你的存储路径
|
||||||
|
cos.putObject(
|
||||||
|
{
|
||||||
|
Bucket: 'lanan-1319802091', // 你的存储桶名称
|
||||||
|
Region: 'ap-chengdu', // 你的存储桶所在区域
|
||||||
|
Key: fileName, // 目标文件路径
|
||||||
|
Body: file // 上传的文件
|
||||||
|
},
|
||||||
|
(err, data) => {
|
||||||
|
if (err) {
|
||||||
|
console.error('上传失败', err);
|
||||||
|
} else {
|
||||||
|
console.log('上传成功', data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
// 触发文件上传
|
||||||
|
async handleUpload(file) {
|
||||||
|
this.$modal.loading("正在上传文件,请稍候...");
|
||||||
|
try {
|
||||||
|
this.totalUploadCount += 1
|
||||||
|
console.log('开始上传:', file);
|
||||||
|
const fileKey = `uploads/${Date.now()}_${file.name}`; // 防止重名
|
||||||
|
|
||||||
|
const data = await cos.uploadFile({
|
||||||
|
Bucket: 'lanan-1319802091',
|
||||||
|
Region: 'ap-chengdu',
|
||||||
|
Key: fileKey,
|
||||||
|
Body: file,
|
||||||
|
SliceSize: 1024 * 1024 * 5, // 5MB 触发分块上传
|
||||||
|
onProgress: progressData => {
|
||||||
|
console.log('上传进度:', progressData);
|
||||||
|
},
|
||||||
|
onTaskReady: id => {
|
||||||
|
this.taskId = id;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('上传成功:', data);
|
||||||
|
this.uploadProgress++
|
||||||
|
if (this.uploadProgress === this.totalUploadCount) {
|
||||||
|
this.$message.success('上传成功');
|
||||||
|
this.uploadProgress = 0;
|
||||||
|
this.totalUploadCount = 0
|
||||||
|
this.$modal.closeLoading();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 手动修改fileList的值,需要在befoupload中添加
|
||||||
|
if (!this.fileList) {
|
||||||
|
this.fileList = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 上传成功后手动更新 fileList
|
||||||
|
this.fileList.push({
|
||||||
|
name: file.name,
|
||||||
|
url: `https://${data.Location}` // 腾讯云返回的 URL
|
||||||
|
});
|
||||||
|
|
||||||
|
// return this.fileList
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('上传失败:', error);
|
||||||
|
this.$modal.closeLoading();
|
||||||
|
}
|
||||||
|
|
||||||
|
return false; // 阻止 el-upload 默认上传
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// 暂停上传
|
||||||
|
pauseUpload() {
|
||||||
|
if (this.taskId) {
|
||||||
|
cos.pauseTask(this.taskId);
|
||||||
|
console.log('上传已暂停:', this.taskId);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 继续上传
|
||||||
|
resumeUpload() {
|
||||||
|
if (this.taskId) {
|
||||||
|
cos.restartTask(this.taskId);
|
||||||
|
console.log('上传已继续:', this.taskId);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 取消上传
|
||||||
|
cancelUpload() {
|
||||||
|
if (this.taskId) {
|
||||||
|
cos.cancelTask(this.taskId);
|
||||||
|
console.log('上传已取消:', this.taskId);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
// 文件个数超出
|
// 文件个数超出
|
||||||
handleExceed() {
|
handleExceed() {
|
||||||
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
|
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
|
||||||
@ -723,20 +883,22 @@ export default {
|
|||||||
},
|
},
|
||||||
// 上传成功回调
|
// 上传成功回调
|
||||||
handleUploadSuccess(res, file) {
|
handleUploadSuccess(res, file) {
|
||||||
if (res.code === 0) {
|
console.log('这是上传成功')
|
||||||
// edit by 芋道源码
|
// if (res.code === 0) {
|
||||||
this.uploadList.push({name: res.data.name, url: res.data.url});
|
// // edit by 芋道源码
|
||||||
|
// this.uploadList.push({name: res.data.name, url: res.data.url});
|
||||||
this.uploadedSuccessfully();
|
this.uploadedSuccessfully();
|
||||||
} else {
|
// } else {
|
||||||
this.number--;
|
// this.number--;
|
||||||
this.$modal.closeLoading();
|
// this.$modal.closeLoading();
|
||||||
this.$modal.msgError(res.msg);
|
// this.$modal.msgError(res.msg);
|
||||||
this.$refs.fileUpload.handleRemove(file);
|
// this.$refs.fileUpload.handleRemove(file);
|
||||||
this.uploadedSuccessfully();
|
// this.uploadedSuccessfully();
|
||||||
}
|
// }
|
||||||
},
|
},
|
||||||
// 上传结束处理
|
// 上传结束处理
|
||||||
uploadedSuccessfully() {
|
uploadedSuccessfully() {
|
||||||
|
console.log('这是上传结束')
|
||||||
if (this.number > 0 && this.uploadList.length === this.number) {
|
if (this.number > 0 && this.uploadList.length === this.number) {
|
||||||
this.fileList = this.fileList.concat(this.uploadList);
|
this.fileList = this.fileList.concat(this.uploadList);
|
||||||
this.uploadList = [];
|
this.uploadList = [];
|
||||||
|
Loading…
Reference in New Issue
Block a user