代码实现:先在本地上传预览,点击保存按钮后将图片文件上传至后台服务器
<template>
<div>
<el-upload
action="/upload"
:on-change="uploadFile"
:before-remove="removeFile"
accept=".jpg,.jpeg,.png*"
multiple
:show-file-list="true"
:file-list="fileList"
list-type="picture"
:auto-upload="false"
>
<el-button>+ 上传附件</el-button>
</el-upload>
<el-button @click="save">保存</el-button>
</div>
</template>
<script>
import { uploadImg } from '@/api/upload'
export default {
name: 'upload',
data () {
return {
fileList: []
}
},
methods: {
// 附件上传
uploadFile (file, fileList) {
const isJPG = file.raw.type === 'image/jpeg'
const isPNG = file.raw.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG && !isPNG) {
fileList.splice(-1, 1)
this.$message.error('附件只能为JPG/PNG格式!')
return
}
if (!isLt2M) {
fileList.splice(-1, 1)
this.$message.error('附件大小不能超过2MB!')
return
}
this.fileList.push({ url: file.url, file: file })
},
// 移除附件
removeFile (file, fileList) {
this.fileList = fileList
},
// 保存附件
save () {
let formData = new FormData()
this.fileList.forEach((item) => {
formData.append('files', item.file.raw)
})
uploadImg(formData).then(res => {
}).catch(e => {
this.$message.error(`error:${e.message}`)
})
}
}
}
</script>
发送请求
import request from './index'
export function uploadImg (formData) {
const result = request({
url: '/upload/uploadImg',
method: 'post',
data: formData
})
return result
}
后台控制层接收请求
@PostMapping("/uploadImg")
public void uploadImg(@RequestPart(value = "files", required = false) MultipartFile[] files) {
System.out.println(files);
}