1、前台

action 不用改 :https://jsonplaceholder.typicode.com/posts/

getFile: 获取文件

data(){
return {
file: {},
fileList: []
}
}
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:file-list="fileList"
@on-change="handleChange"
:http-request="getFile"
>
<el-button size="small" type="primary">上传</el-button>
</el-upload>
<el-button size="small" type="success" @click="upload">确认上传</el-button>

  

 getFile(item) {
console.log(item.file)
this.file = item.file
},
upload() {
const fd = new FormData()
fd.append('filename', this.file)
const config = { headers: { 'Content-Type': 'multipart/form-data' }}
this.$request.post('/uploading', fd, config
).then(response => {
this.$message.success(response.retCode)
})
},

2、后台

    @ApiOperation("上传文件")
@PostMapping(value = "/uploading")
public @ResponseBody
String uploadFile(@RequestParam("filename") MultipartFile file) {
log.info("接收到的文件数据为:" + file); if (file.isEmpty()) { return "上传文件为空";
}
// 获取文件全名a.py
String fileName = file.getOriginalFilename();
// 文件上传路径
String templatePath = "E:/file/template/"
log.info("文件路径:" + templatePath);
// 获取文件的后缀名
String suffixName = fileName.substring(fileName.lastIndexOf("."));
//获取文件名
String prefixName = fileName.substring(0, fileName.lastIndexOf("."));
// 解决中文问题,liunx 下中文路径,图片显示问题
//fileName = UUID.randomUUID() + suffixName;
File dest0 = new File(templatePath);
File dest = new File(dest0, prefixName + File.separator + fileName);
//文件上传-覆盖
try {
// 检测是否存在目录
if (!dest0.getParentFile().exists()) {
dest0.getParentFile().mkdirs();
//检测文件是否存在
}
if (!dest.exists()) {
dest.mkdirs();
}
file.transferTo(dest);
return "上传成功";
} catch (Exception e) {
log.error("文件上传错误");
return "上传失败";
} }

  3、效果演示

vue ----element-ui 文件上传upload 组件 实现 及其后台的更多相关文章

  1. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  2. vue+axios+elementUI文件上传与下载

    vue+axios+elementUI文件上传与下载 Simple_Learn 关注  0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...

  3. vue之element-ui文件上传

    vue之element-ui文件上传 文件上传需求 ​ 对于文件上传,实际项目中我们的需求一般分两种: 对于单个的文件上传,比如拖动上传个图片之类的,或者是文件. 和表单一起实现上传(这种情况一般都是 ...

  4. 文件上传plupload组件使用

    这段时间一直在使用文件上传,简要的介绍一下文件上传的组件使用,先上一段代码. var uploader = new plupload.Uploader( { //用来指定上传方式,指定多个上传方式请使 ...

  5. VUE项目中文件上传兼容IE9

    项目使用VUE编写,UI是ElementUI,但是Element的Upload组件是不兼容IE9的.因为IE9中无法使用FormData. 查找资料基本有两种解决方法:1.引入JQuery和jQuer ...

  6. element中文件上传

    vue+element 文件操作 作者:一粒尘土 时间:2019-3-17 注:以下操作针对 vue-cli 目录 使用 组件常用参数 组件常用方法 上传文件 上传文件格式限制 回显文件 下载文件 删 ...

  7. chunkupload文件上传断点续传组件(java)

    chunkupload简介 chunkupload是一款基于java语言的断点续传组件,针对文件上传,非文件下载,集成方便,使用简单. 从整体上讲,chunkupload会对文件进行切片处理,每个切片 ...

  8. chunkupload 文件上传断点续传组件(java) - 正式发布

    chunkupload简介 chunkupload是一款基于java语言的断点续传组件,针对文件上传,非文件下载,集成方便,使用简单. chunkupload实现如下功能: ·  实现断点续传 ·  ...

  9. flash文件上传下载组件

    以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传  ...

随机推荐

  1. Hawk 4.2 过滤器

    过滤器可以在流中,过滤掉不符合条件的文档.当然也可勾选反向,此时只会留下不符合条件的文档. 空对象过滤器 最为常用,需要列名,可以过滤掉所有内容为Null,或字符串全部都是空字符的情况 数值范围过滤 ...

  2. javascript动态添加form表单元素

    2014年11月7日 17:10:40 之前写过几篇类似的文章,现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主 ...

  3. Lua基础之语法

    目录:1.输出2.注释3.控制语句4.赋值语句5.运算符6.关键字7.变量类型8.其他 原文地址http://blog.csdn.net/dingkun520wy/article/details/49 ...

  4. ETL实践--Spark做数据清洗

    ETL实践--Spark做数据清洗 上篇博客,说的是用hive代替kettle的表关联.是为了提高效率. 本文要说的spark就不光是为了效率的问题. 1.用spark的原因 (如果是一个sql能搞定 ...

  5. ActiveMQ简单使用

    // 第一步:创建ConnectionFactory对象,需要指定服务端ip及端口号. //brokerURL服务器的ip及端口号 ConnectionFactory connectionFactor ...

  6. centos7安装keepalived问题

    ● keepalived.service - LVS and VRRP High Availability Monitor Loaded: loaded (/usr/lib/systemd/syste ...

  7. 浅析requests库响应对象的text和content属性

    在做爬虫时请求网页的requests库是必不可少的,我们常常会用到 res = resquests.get(url) 方法,在获取网页的html代码时常常使用res的text属性: html = re ...

  8. 20145203盖泽双《网络对抗技术》实践五:MSF基础应用

    20145203盖泽双<网络对抗技术>实践五:MSF基础应用 1.实践目标 掌握metasploit的基本应用方式,掌握常用的三种攻击方式的思路.下面是我自己做的时候用的四个套路. (1) ...

  9. C++ Custom Control控件 向父窗体发送对应的消息

    向父窗体发送消息 ,这里只讲发送 WM_NOTIFY  消息, 其它消息是相同的 在 控件中的某个函数中 设置发送消息的程序 首先定义一个WM_NOTIFY消息的专用结构. NMHDR nm; nm. ...

  10. LR、HMM、CRF和MaxEnt区别

    LR:Logistic 是 Softmax 的特殊形式,多以如果 Softmax 与 MaxEnt 是等价的,则 Logistic 与 MaxEnt 是等价的. HMM模型: 将标注看作马尔可夫链,一 ...