前端部分：
<template>
<div>
<el-row>
<el-col :span="12" :offset="6">
<div >
<el-row>
<el-col :span="24">
<div>
<el-upload
action=""
list-type="picture-card"
:auto-upload="false"
:limit="5"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-change="fileChange"
:multiple="true"
:file-list="fileList">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="3" :offset="15">
<el-button type="primary" class="btn_pos" @click="uploadImage">上传</el-button>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
dialogImageUrl: '',
dialogVisible: false,
//用来接收缓存中的图片
fileList: []
};
},
methods: {
handleRemove(file, fileList) {
this.fileList = fileList;
},
fileChange(file, fileList){
this.fileList = fileList;
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
uploadImage(){
let formData = new FormData();
for(let i = 0; i < this.fileList.length; i++){
//this.fileList[i].raw:获取图片格式
//这里的file必须和后端Controller中的requestparam参数一致，才能上传成功，否则会报400错误
formData.append("file", this.fileList[i].raw, this.fileList[i].name);
}
//这里重新创建了一个axios实例,是因为我在全局配置里的Content-type是appliacation/json,而这里我想要使用multipart/form-data
const http1 = axios.create({
headers: {
// 'Content-Type': 'multipart/form-data'
"Content-Type": "multipart/form-data"
}
})
http1({
url: 'http://localhost:8081/lunbo/upload',
method: 'post',
data: formData
})
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log(err);
});
}
}
}
</script>
<style scoped>
.btn_pos{
margin-top: 0px;
}
</style>