<template>
<div>
<el-card style="margin: 10px">
<el-upload
class="upload-demo"
ref="upload"
action="http://localhost:9002/cosservice/cos/imgs"
multiple
:limit="4"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-card>
</div>
</template>
<script>
import request from '@/utils/request'
export default {
name: "index",
data() {
return {
fileList: []
}
},
methods: {
submitUpload() {
let {uploadFiles, action, data} = this.$refs.upload
const formData = new FormData()
uploadFiles.map(file => {
formData.append("files",file.raw)
})
request({
url: action,
method: 'post',
data: formData
})
},
handleRemove(file, fileList) {
console.log(fileList)
},
handlePreview(file) {
console.log(file)
}
}
}
</script>
<style scoped>
</style>
后端
@ApiOperation(value = "上传多张图片")
@PostMapping( value = "/imgs")
@ApiImplicitParams(@ApiImplicitParam(name = "files",paramType = "formData",value = "图片",required = true,dataType = "file",allowMultiple=true))
public BaseResult uploadImgs(MultipartFile[] files){
System.out.println(files.length);
List<String> list = cosService.uploadImgs(files);
return BaseResult.success().data("imgsUrl",list);
}
版权声明:本文为qq_40945081原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。