说明
页面效果
上传流程
上传图片分2步：
前端上传图片，发给后端。后端接收图片，存到指定位置。将图片 url返回给前端
前端接收到url数据后，将表单数据 和 图片 url 发送给后端
springboot
springboot上传文件，是通过 commons-fileupload.jar、commons-io.jar 实现的，但是对其做了封装，使用起来更简单
Controller方法中，通过 MultipartFile 接口来处理文件上传
修改pom.xml
添加 commons-fileupload、commons-io 依赖：
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>
MultipartFile接口
springboot 将上传文件的相关数据封装到 MultipartFile 接口类对象中，主要方法：
isEmpty()：是否上传文件getOriginalFilename()：上传文件名称transferTo()：将临时文件转移到指定目录getContentType()：获取类型getInputStream()：获取输入流getSize()：获取上传文件大小getBytes()：获取上传文件的字节数组getName()：获取临时文件名
完整代码
package com.stdspringboot.ctrl;
import com.stdspringboot.util.UUIDUtil;
import com.stdspringboot.vo.JsonResult;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.util.List;
@RestController
@RequestMapping("/upload")
public class UploadCtrl {
@PostMapping("/upload")
public JsonResult upload(MultipartFile img) throws IOException {
//防止不同用户上传的文件名相同，导致文件互相覆盖，所以用uuid作为文件名，如：将1.jpg改为2384234.jpg
//获取上传文件的名字
String oFilename=img.getOriginalFilename();
//截取文件后缀，如：将 1.jpg 截取出 .jpg
int pos=oFilename.lastIndexOf(".");
String suffix=oFilename.substring(pos);
String uuid= UUIDUtil.uuid();
String newFile=uuid+suffix;
/*
拼装保存上传文件的路径
*/
//找到classpath
File classpath=ResourceUtils.getFile(ResourceUtils.CLASSPATH_URL_PREFIX);
//拼装保存上传文件的路径
File uploadFile=new File(classpath,"/static/upload");
//判断该文件夹是否存在，不存在就创建
if(!uploadFile.exists()){
uploadFile.mkdirs();
}
/*
将上传的文件，移动到保存目录下
*/
//拼装文件的全路径，包含路径+文件名
File file=new File(uploadFile,newFile);
img.transferTo(file);
//将访问图片的url返回给前端
return JsonResult.success("上传成功！","upload/"+newFile);
}
@RequestMapping("/add")
public JsonResult add2(String name, @RequestParam(value = "uploadList",required = false) List uploadList){
return JsonResult.success("添加成功！");
}
}
vue
页面
注意： 上传控件的 name 属性名，与 MultipartFile 形参必须同名，否则为 null
完整代码
<template>
<div>
<el-form ref="form" label-width="80px">
<el-form-item label="姓名">
<el-col :span="8">
<el-input v-model="name" >
</el-input>
</el-col>
</el-form-item>
<el-form-item>
<el-upload
name="img"
action="http://localhost:8080/upload/upload"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="uploadSucess"
:before-remove="beforeRemove"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="doSubmit">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import request from '@/utils/request'
import store from '@/store'
export default {
data: function(){
return { //是vue的配置，表示数据
name:"",
dialogImageUrl: '',
dialogVisible: false,
uploadList: [], //上传成功后，将图片链接放到该数组中。提交表单时，要带上该数据
}
}
,
methods:{
doSubmit:function(){
//显示loading
const loading = this.$loading({
lock: true,
text: '请稍等...',
spinner: 'el-icon-loading'
});
//调用axios发请求，需要通过post方法
//axios中，通过post传参数，需要通过下面对象
let params = new URLSearchParams();
params.append("name", this.name);
params.append("uploadList", this.uploadList)
request({
url: '/upload/add',
method: 'post',
params
}).then(res => {
console.log(res);
if(res.code===0){
this.$message({
showClose: true,
message: '添加成功！',
type: 'success'
});
}else{
this.$message({
showClose: true,
message: res.msg,
type: 'error'
});
}
loading.close() // 关闭loading
})
.catch(function (error) {// 请求失败处理
console.log(error);
loading.close() // 关闭loading
});
},
handlePictureCardPreview(file) { //点击上传图片加号按钮执行的函数
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
beforeRemove(file, fileList) { //点击上传图片删除按钮，先执行该函数
return this.$confirm(`确定移除 ${ file.name }？`);
},
handleRemove(file, fileList) { //点击上传图片删除按钮，然后执行该函数
console.log(file, fileList);
console.log(file.response.data)
var index=this.uploadList.indexOf(file.response.data);
this.uploadList.splice(index,1)
},
uploadSucess(response, file, fileList){ //上传图片成功的函数
console.log(response)
console.log(file)
console.log(fileList)
console.log(response.data)
this.uploadList.push(response.data)
}
}
}
</script>
关键
提交数据到后端时，需要带上 uploadList 数据