@PostMapping("/file/new")
public List<Map> getFileUrl(@RequestParam("file[]") MultipartFile[] file) {
log.info("file {}",file.length);
if(file==null || file.length==0) {
return Collections.emptyList();
}
System.out.println(file.length+"->"+file);
return Stream.of(file)
.map(f->fileService.uploadOneFile(f))
.map(Result::getData)
.map(url -> {
return ViewObject.of("url",url,"name",url,"error",0).getModel();
})
.collect(Collectors.toList());
}
<template>
<div class="clearfix">
<a-upload
:action="uploadURL"
list-type="picture-card"
:file-list="fileList"
@preview="handlePreview"
@change="handleChange"
>
<div v-if="fileList.length < this.uploadNum">
<a-icon type="plus"/>
<div class="ant-upload-text">
上传
</div>
</div>
</a-upload>
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage"/>
</a-modal>
</div>
</template>
<script>
import {uploadURL} from "../../config/baseconfig";
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
export default {
props: {
uploadNum: {
type: Number,
default: 1
}
},
data() {
return {
uploadURL: uploadURL,
previewVisible: false,
previewImage: '',
fileList: [
{
uid: '-1',
name: 'image.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
],
};
},
methods: {
handleCancel() {
this.previewVisible = false;
},
async handlePreview(file) {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
this.previewImage = file.url || file.preview;
this.previewVisible = true;
},
handleChange(info) {
console.log(info)
const formData = new FormData()
formData.append('file[]', info.file.originFileObj)
this.$api.post(this.uploadURL, formData,{
headers:{
'Content-Type':'multipart/form-data'
}
})
.then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
this.fileList = info.fileList;
},
},
mounted() {
console.log(this.uploadURL)
}
};
</script>
<style>
.ant-upload-select-picture-card i {
font-size: 32px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
color: #666;
}
</style>