若依微服务中的上传文件的前后端实现

2024-01-12 14:36
文章标签 实现 服务 上传 依微

本文主要是介绍若依微服务中的上传文件的前后端实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前端:
:limit用来控制上传文件数量的默认一

<template><div class="app-container"><el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="唯一标识" prop="hwplmid"><el-input v-model="queryParams.hwplmid" placeholder="请输入唯一标识" clearable @keyup.enter.native="handleQuery" /></el-form-item><el-form-item label="文件名" prop="filename"><el-input v-model="queryParams.filename" placeholder="请输入文件名" clearable @keyup.enter.native="handleQuery" /></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button><el-button icon="el-icon-refresh" size="mini" @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"v-hasPermi="['system:homeworkplanm:add']">新增</el-button></el-col><el-col :span="1.5"><el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"v-hasPermi="['system:homeworkplanm:edit']">修改</el-button></el-col><el-col :span="1.5"><el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"v-hasPermi="['system:homeworkplanm:remove']">删除</el-button></el-col><el-col :span="1.5"><el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"v-hasPermi="['system:homeworkplanm:export']">导出</el-button></el-col><right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar></el-row><el-table v-loading="loading" :data="homeworkplanmList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="唯一标识" align="center" prop="hwplmid" /><el-table-column label="文件" align="center"><template slot-scope="scope"><a class="downa" :href="scope.row.filepath">下载</a></template></el-table-column><el-table-column label="文件名" align="center" prop="filename" /><el-table-column align="center" prop="remark"><template #header><el-tooltip class="item" effect="dark" content="这里可以自定义内容,内容尽量规范(例如:企业*——*单位*——*用处)" placement="top-start"><span class="custom-label">备注<svg-icon icon-class="helpowen"/></span></el-tooltip>  </template></el-table-column><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template slot-scope="scope"><el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"v-hasPermi="['system:homeworkplanm:edit']">修改</el-button><el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"v-hasPermi="['system:homeworkplanm:remove']">删除</el-button></template></el-table-column></el-table><pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"@pagination="getList" /><!-- 添加或修改作业方案对话框 --><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="备注" prop="remark"><el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /></el-form-item><el-form-item label="文件" prop="filepath"><el-upload ref="upload" :limit="1" :action="upload.url" :headers="upload.headers":file-list="upload.fileList" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess":auto-upload="false"><el-button slot="trigger" size="small" type="primary">选取文件</el-button><el-button style="margin-left: 10px;" size="small" type="success" :loading="upload.isUploading"@click="submitUpload">上传到服务器</el-button><div slot="tip" class="el-upload__tip">只能上传bmp, gif, jpg, jpeg, png, doc, docx, xls, xlsx, ppt,pptx, html, htm, txt, rar, zip, gz, bz2, mp4, avi, rmvb, pdf文件,且不超过3GB</div></el-upload></el-form-item><el-form-item label="文件名" prop="filename"><el-input disabled v-model="form.filename" placeholder="请输入文件名" /></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog></div>
</template><script>
import { listHomeworkplanm, getHomeworkplanm, delHomeworkplanm, addHomeworkplanm, updateHomeworkplanm, byidgetInfo } from "@/api/system/homeworkplanm";
import { getToken } from "@/utils/auth";
export default {name: "Homeworkplanm",data() {return {// 遮罩层loading: true,// 选中数组ids: [],// 非单个禁用single: true,// 非多个禁用multiple: true,// 显示搜索条件showSearch: true,// 总条数total: 0,// 作业方案表格数据homeworkplanmList: [],// 弹出层标题title: "",// 是否显示弹出层open: false,// 查询参数queryParams: {pageNum: 1,pageSize: 10,filepath: null,hwplmid: null,filename: null},// 表单参数form: {},// 表单校验rules: {remark: [{ required: true, message: "描述不能为空", trigger: "blur" }],filepath: [{ required: true, message: "请选择文件", trigger: "blur" }],},// 上传参数upload: {// 是否禁用上传isUploading: false,// 设置上传的请求头部headers: { Authorization: "Bearer " + getToken() },// 上传的地址url: process.env.VUE_APP_BASE_API + "/file/upload",// 上传的文件列表fileList: []},};},created() {this.getList();},methods: {/** 查询作业方案列表 */getList() {this.loading = true;listHomeworkplanm(this.queryParams).then(response => {this.homeworkplanmList = response.rows;this.total = response.total;this.loading = false;});},// 取消按钮cancel() {this.open = false;this.reset();},// 表单重置reset() {this.form = {createBy: null,createTime: null,updateTime: null,updateBy: null,remark: null,filepath: null,hwplmid: null,filename: null};this.resetForm("form");},/** 搜索按钮操作 */handleQuery() {this.queryParams.pageNum = 1;this.getList();},/** 重置按钮操作 */resetQuery() {this.resetForm("queryForm");this.handleQuery();},// 多选框选中数据handleSelectionChange(selection) {this.ids = selection.map(item => item.hwplmid)this.single = selection.length !== 1this.multiple = !selection.length},/** 新增按钮操作 */handleAdd() {this.reset();this.open = true;this.title = "添加作业方案";this.upload.fileList = [];},/** 修改按钮操作 */handleUpdate(row) {this.reset();const createBy = row.hwplmid || this.idsbyidgetInfo(createBy).then(response => {this.form = response.data;this.open = true;this.title = "修改作业方案";});this.upload.fileList = [{ name: this.form.fileName, url: this.form.filePath }];},/** 提交按钮 */submitForm() {this.$refs["form"].validate(valid => {if (valid) {if (this.form.hwplmid != null) {updateHomeworkplanm(this.form).then(response => {this.$modal.msgSuccess("修改成功");this.open = false;this.getList();});} else {alert(JSON.stringify(this.form))alert(this.form.hwplmid)addHomeworkplanm(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();});}}});},/** 删除按钮操作 */handleDelete(row) {const createBys = row.hwplmid || this.ids;this.$modal.confirm('是否确认删除作业方案编号为"' + createBys + '"的数据项?').then(function () {return delHomeworkplanm(createBys);}).then(() => {this.getList();this.$modal.msgSuccess("删除成功");}).catch(() => { });},/** 导出按钮操作 */handleExport() {this.download('system/homeworkplanm/export', {...this.queryParams}, `homeworkplanm_${new Date().getTime()}.xlsx`)},// 文件提交处理submitUpload() {this.$refs.upload.submit();},// 文件上传中处理handleFileUploadProgress(event, file, fileList) {this.upload.isUploading = true;},// 文件上传成功处理handleFileSuccess(response, file, fileList) {this.upload.isUploading = false;this.form.filepath = response.data.url;this.form.filename = response.data.name;this.msgSuccess(response.msg);}}
};
</script>
<style scoped>
.downa:link {color: #1890FF;
}.downa:hover {color: red;
}
</style>

后端
若依项目自带的详情自己下载自己去找service层去看吧

 package com.ruoyi.file.controller;import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import com.ruoyi.common.core.domain.R;
import com.ruoyi.common.core.utils.file.FileUtils;
import com.ruoyi.file.service.ISysFileService;
import com.ruoyi.system.api.domain.SysFile;/*** 文件请求处理* * @author ruoyi*/
@RestController
public class SysFileController
{private static final Logger log = LoggerFactory.getLogger(SysFileController.class);@Autowiredprivate ISysFileService sysFileService;/*** 文件上传请求*/@PostMapping("upload")public R<SysFile> upload(MultipartFile file){try{// 上传并返回访问地址String url = sysFileService.uploadFile(file);SysFile sysFile = new SysFile();sysFile.setName(FileUtils.getName(url));sysFile.setUrl(url);return R.ok(sysFile);}catch (Exception e){log.error("上传文件失败", e);return R.fail(e.getMessage());}}
}

这篇关于若依微服务中的上传文件的前后端实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/598186

相关文章

基于SpringBoot+Mybatis实现Mysql分表

《基于SpringBoot+Mybatis实现Mysql分表》这篇文章主要为大家详细介绍了基于SpringBoot+Mybatis实现Mysql分表的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录基本思路定义注解创建ThreadLocal创建拦截器业务处理基本思路1.根据创建时间字段按年进

SpringBoot3实现Gzip压缩优化的技术指南

《SpringBoot3实现Gzip压缩优化的技术指南》随着Web应用的用户量和数据量增加,网络带宽和页面加载速度逐渐成为瓶颈,为了减少数据传输量,提高用户体验,我们可以使用Gzip压缩HTTP响应,... 目录1、简述2、配置2.1 添加依赖2.2 配置 Gzip 压缩3、服务端应用4、前端应用4.1 N

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一:基于AbstractRoutingDataSource实现动态

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制,确认复制是否成功4.同

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义