Springboot+vue前后端分离(所有项目通用)-实现图片上传

前情说明:本代码暂时只供本人实用，可以实现效果，如大家有觉得需要改进或者可以用到的地方，可以随时给我建议和意见谢谢

前端vue

按钮

          <el-buttonv-model="form.importsysRemark"type="warning"plainicon="el-icon-upload2"size="mini"@click="handleImport"v-hasPermi="['daq:filesub:importUrl']">点击添加说明</el-button>

method

    /** 导入按钮操作 */handleImport() {this.upload.title = "用户导入";this.upload.open = true;},

data

data(){return{upload: {// 是否显示弹出层（用户导入）open: false,// 弹出层标题（用户导入）title: "",// 是否禁用上传isUploading: false,// 是否更新已经存在的用户数据updateSupport: 0,// 设置上传的请求头部headers: { Authorization: "Bearer " + getToken() },// 上传的地址url: process.env.VUE_APP_BASE_API + "/daq/filesub/importUrl"},imageUrl: '',}
}

弹出框

<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body><el-uploadref="upload":limit="1"accept=".png, .jpg, .jpeg":headers="upload.headers":action="upload.url + '?updateSupport=' + upload.updateSupport":disabled="upload.isUploading":on-progress="handleFileUploadProgress":on-success="handleFileSuccess":auto-upload="false"drag><img v-if="imageUrl" :src="data:imageUrl" class="avatar"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip text-center" slot="tip"><div class="el-upload__tip" slot="tip"><el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据</div><span>仅允许导入.png、.jpg、.jpeg格式的图片。</span></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>

method

/** 文件上传中处理 */handleFileUploadProgress(event, file, fileList) {this.upload.isUploading = true;},/** 文件上传成功处理 */handleFileSuccess(response, file, fileList) {this.imageUrl = URL.createObjectURL(file.raw);console.log(this.imageUrl)this.upload.open = false;this.upload.isUploading = false;this.form.importsysRemark = this.imageUrl;this.$refs.upload.clearFiles();this.getList();},/** 提交上传文件 */submitFileForm() {this.$refs.upload.submit();}

data(){return{// 表单参数form: {id: null,importsysId: null,importsysName: null,importsysZid: null,importsysStage: null,importsysDutyBranch: null,importsysRelatedBranch: null,importsysInput: null,importsysOutput: null,importsysCreateTime: null,importsysUpdateTime: null,importsysRemark: null}}
}

添加提交按钮

 /** 提交按钮 */submitForm() {this.$refs["form"].validate(valid => {if (valid) {if (this.form.id != null) {updateImportsys(this.form).then(response => {this.$modal.msgSuccess("修改成功");this.open = false;this.getList();});} else {addImportsys(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.fileadd = false;this.getList();});}}});},

style

<style>
.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;
}
.avatar-uploader .el-upload:hover {border-color: #409EFF;
}
.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;
}
.avatar {width: 178px;height: 178px;display: block;
}
</style>

后端springboot

application

file:domain: http://localhost:${server.port}//enable: truepath: D:\picture
# Spring配置
spring:# 资源信息messages:# 国际化资源文件路径basename: i18n/messagesprofiles: active: druid# 文件上传servlet:multipart:# 单个文件大小max-file-size:  10MB# 设置总上传的文件大小max-request-size:  100MB

controller

 /*** @Author: YangZhiSen* @Date: 2021/12/14 9:58* @text: 文件上传到服务器*/@ApiOperation("图片上传")@ResponseBody@PreAuthorize("@ss.hasPermi('daq:filesub:importUrl')")@PostMapping("/importUrl")public String importData(@RequestParam("file") MultipartFile file) throws Exception {String filename = UUID.randomUUID().toString()+file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));File filepath = new File("D:\\picture\\pic\\" + filename);String url = String.valueOf(filepath);file.transferTo(filepath);System.err.println("图片存储地址是"+url);return url;}

Springboot+vue前后端分离(所有项目通用)-实现图片上传相关推荐

SpringBoot + Vue 前后端分离（用户信息更新头像上传Markdown图片上传）
文章目录前言用户信息更新前端发送后端接口修改用户头像前端前端图片显示图片上传完整代码后端代码图片存储图片上传工具类图片工具类的配置工具类实现效果 Markdown 图片 ...
基于Springboot+vue前后端分离的项目--后端笔记
效果图: 1.前言从零开始搭建一个项目最重要的是选择一个自己熟悉的框架,此项目使用Springboot框架来构建后端结构,使用vue来构建前端页面.数据层我们常用的是Mybatis,这里我大部分使 ...
基于Springboot+vue前后端分离商城项目基本开发手册——商城表设计【三】
商品信息商品分组购物车订单地区管理运费模板商品信息 1. 背景了解在看具体的数据库实体设计之前,我们先一起了解下电商的名词定义 1.1 名词定义参考 <产品 SKU 是什么意思? ...
大二期末作孽（SpringBoot+Vue前后端分离博客社区（重构White Hole））
文章目录前言目录效果演示前言由于时间关系,完成度确实不高,而且不签只是完成了客户端,当然目前这样也是已经可以正常使用了,当然有点勉强.不过后续还是会不断的去更新维护的,不过大体的架构是这样的 ...
从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建参考学习vue官网文档 https://v3.cn.vuejs.org/guide/installati ...
基于SpringBoot+Vue前后端分离的在线教育平台项目
基于SpringBoot+Vue前后端分离的在线教育平台项目赠给有缘人,希望能帮助到你!也请不要吝惜你的大拇指,你的Star.点赞将是对我最大的鼓励与支持! 开源传送门: 后台:Gitee | Gi ...
SpringBoot+vue前后端分离博客项目
SpringBoot+vue前后端分离博客项目 Java后端接口开发 1.前言 2.新建Springboot项目 3.整合mybatis plus 第一步:导入jar包第二步:然后去写配置文件: 第 ...
阿里服务器部署springboot+vue前后端分离项目
服务器部署springboot+vue前后端分离项目最近刚刚在实习熟悉公司的业务,所有尝试着自己将项目部署到服务器上.本次部署的项目是Spring Boot+Vue前后端分离项目,后端使用的技术有M ...
SpringBoot + Vue前后端分离开发：全局异常处理及统一结果封装
SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装文章目录 SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装前后端分离开发中的异常处理统一结果封 ...

Springboot+vue前后端分离(所有项目通用)-实现图片上传

Springboot+vue前后端分离(所有项目通用)-实现图片上传相关推荐

最新文章

热门文章