vue使用el-upload实现文件上传的实例代码
作者：数据大魔王
这篇文章主要为大家详细介绍了vue使用el-upload实现文件上传,文中示例代码介绍的非常详细,对大家的学习或工作有一定的帮助,感兴趣的小伙伴们可以参考一下
引言
因为我是vue+springboot前后分离，要跨域，就不能用默认的action写请求地址，我用axios时最困扰的就是怎么拿到那个真实的文件，然后给传给后台。
其实可以通过自带的onchanne触发方法获得文件列表，文件信息中那个raw就是真实的文件。
写的时候，刚开始我是直接把el-upload里面的button中加了点击事件，但是每次文件还没选，就已经向后台发出请求了，当然传不过去，于是外面套了个form。
element-ui组件使用可以查看文档
一、前台Vue
<template>
<el-form>
<el-form-item label="姓名" prop="name">
<el-input v-model="name"></el-input>
</el-form-item>
<el-form-item>
<el-upload ref="upfile"
style="display: inline"
:auto-upload="false"
:on-change="handleChange"
:file-list="fileList"
action="#">
<el-button type="success">选择文件</el-button>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="success" @click="upload">点击上传</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name:'UploadUi',
data(){
return{
name:'',
fileList:[]
}
},
methods:{
//通过onchanne触发方法获得文件列表
handleChange(file, fileList) {
this.fileList = fileList;
console.log(fileList)
},
upload(){
let fd = new FormData();
fd.append("name",this.name);
this.fileList.forEach(item=>{
//文件信息中raw才是真的文件
fd.append("files",item.raw);
//console.log(item.raw)
})
this.$axios.post('/uploadUi',fd).then(res=>{
if (res.data.code === 200) {
//console.log(res);
this.$message('上传成功')
}else{
this.$message('失败')
}
})
},
}
}
</script>
二、后台Springboot
package com.example.demo.controller;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.util.List;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import com.example.demo.entity.ListParam;
import com.example.demo.entity.MyUser;
import com.example.demo.entity.Result;
@RestController
@ResponseBody
@CrossOrigin
@RequestMapping("/api")
public class UploadController {
@PostMapping("/uploadUi")
public Result upFile(@RequestParam("name")String name,@RequestParam("files") MultipartFile[] files ) {
System.out.println("开始");
System.out.println(name);
if(files != null) {
for(MultipartFile file : files) {
String fileName = file.getOriginalFilename();
System.out.println(fileName);
try{
File mkdir = new File("F:\\app\\file");
if(!mkdir.exists()) {
mkdir.mkdirs();
}
//定义输出流，将文件写入硬盘
FileOutputStream os = new FileOutputStream(mkdir.getPath()+"\\"+fileName);
InputStream in = file.getInputStream();
int b = 0;
while((b=in.read())!=-1){ //读取文件
os.write(b);
}
os.flush(); //关闭流
in.close();
os.close();
}catch(Exception e) {
e.printStackTrace();
return new Result(401,"失败");
}
}
return new Result(200,"成功");
}else {
return new Result(401,"文件找不到");
}
}
}
总结
以上就是本文的全部内容，希望对大家的学习有所帮助
到此这篇关于vue使用el-upload实现文件上传的文章就介绍到这了,更多相关vue el-upload文件上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！