系列文章目录

文章目录

系列文章目录
前言
一、前台Vue
二、后台Springboot
总结

前言

因为我是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,"文件找不到");}}}