文件
文件 & 文件夹 & 对话框
# 系统原生对话框
// frontend/src/views/os/file/Ipc.vue
<script>
messageShow() {
this.$ipc.invoke(ipcApiRoute.messageShow, '').then(r => {
this.$message.info(r);
})
},
messageShowConfirm() {
this.$ipc.invoke(ipcApiRoute.messageShowConfirm, '').then(r => {
this.$message.info(r);
})
},
</script>
// electron/controller/os.js
const { dialog } = require('electron');
/**
* 消息提示对话框
*/
messageShow() {
dialog.showMessageBoxSync({
type: 'info', // "none", "info", "error", "question" 或者 "warning"
title: '自定义标题-message',
message: '自定义消息内容',
detail: '其它的额外信息'
})
return '打开了消息框';
}
/**
* 消息提示与确认对话框
*/
messageShowConfirm() {
const res = dialog.showMessageBoxSync({
type: 'info',
title: '自定义标题-message',
message: '自定义消息内容',
detail: '其它的额外信息',
cancelId: 1, // 用于取消对话框的按钮的索引
defaultId: 0, // 设置默认选中的按钮
buttons: ['确认', '取消'], // 按钮及索引
})
let data = (res === 0) ? '点击确认按钮' : '点击取消按钮';
return data;
}
// Make sure to add code blocks to your code group
# 选择目录
// frontend/src/views/os/file/Index.vue
<script>
selectDir() {
this.$ipc.invoke(ipcApiRoute.selectFolder, '').then(r => {
this.dir_path = r;
this.$message.info(r);
})
},
</script>
// electron/controller/os.js
const { dialog } = require('electron');
/**
* 选择目录
*/
selectFolder() {
const filePaths = dialog.showOpenDialogSync({
properties: ['openDirectory', 'createDirectory']
});
if (_.isEmpty(filePaths)) {
return null
}
return filePaths[0];
}
// Make sure to add code blocks to your code group
# 打开文件夹
// frontend/src/views/os/file/Index.vue
<script>
// id: 'downloads' | 'pictures' | 'documents' | 'music'
openDirectry (id) {
this.$ipc.invoke(ipcApiRoute.openDirectory, {id: id}).then(res => {
//console.log('res:', res)
})
},
</script>
// electron/controller/os.js
const path = require('path');
const { app: electronApp, shell } = require('electron');
/**
* 打开目录
*/
openDirectory(args) {
if (!args.id) {
return false;
}
let dir = '';
if (path.isAbsolute(args.id)) {
dir = args.id;
} else {
dir = electronApp.getPath(args.id);
}
shell.openPath(dir);
return true;
}
// Make sure to add code blocks to your code group
# 上传文件到图床
// frontend/src/views/os/file/Index.vue
<script>
handleFileChange(info) {
if (this.action_url == '') {
this.$message.error('http服务未开启');
return;
}
const status = info.file.status;
if (status !== 'uploading') {
console.log(info.file);
}
if (status === 'done') {
const uploadRes = info.file.response;
if (uploadRes.code !== 'success') {
this.$message.error(`file upload failed ${uploadRes.code} .`);
return false;
}
this.num++;
const picInfo = uploadRes.data;
picInfo.id = this.num;
picInfo.imageUrlText = 'image url';
this.image_info.push(picInfo);
this.$message.success(`${info.file.name} file uploaded successfully.`);
} else if (status === 'error') {
this.$message.error(`${info.file.name} file upload failed.`);
}
},
</script>
// electron/controller/framework.js
/**
* 上传文件
*/
async uploadFile() {
let tmpDir = Ps.getLogDir();
const files = this.app.request.files;
let file = files.file;
let tmpFilePath = path.join(tmpDir, file.originalFilename);
try {
let tmpFile = fs.readFileSync(file.filepath);
fs.writeFileSync(tmpFilePath, tmpFile);
} finally {
await fs.unlink(file.filepath, function(){});
}
const fileStream = fs.createReadStream(tmpFilePath);
const uploadRes = await this.service.framework.uploadFileToSMMS(fileStream);
return uploadRes;
}
// Make sure to add code blocks to your code group
# 完整代码
上次更新: 2025/06/06, 07:21:49