这篇文章主要介绍了vue怎么使用el-upload实现文件上传功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue怎么使用el-upload实现文件上传功能文章都会有所收获,下面我们一起来看看吧。
upload.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"
: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后台 uploadController.java
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实现文件上传功能”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。