html~~~~~~
<div>
<a-upload
listType="picture-card"
:fileList="fileList"
@preview="handlePreview"
@change="handleChange"
:before-upload="beforeUpload"
>
<div v-if="fileList.length < 5">
<a-icon type="plus"/>
<div class="ant-upload-text">上传</div>
</div>
</a-upload>
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="预览" style="width: 100%" :src="previewImage"/>
</a-modal>
<span @click=‘handleUp‘>上传</div>
</div>
js~~~~~~
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 {
data () {
return {
previewVisible: false,
previewImage: ‘‘,
fileList: [],
fileListIds: [],
}
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 ({ fileList }) { // 图片上传
this.fileList = fileList
const fileIds = fileList.filter(file => file.id).map(file => file.id)
const uploadFiles = fileList.filter(file => file.originFileObj)
if (uploadFiles && uploadFiles.length) {
const formData = new FormData()
uploadFiles.forEach(file => {
formData.append(‘files[]‘, file.originFileObj)
})
this.$fileService.post(this.fileService.getBaseUrl(), formData).then(res => { // 后台文件上传地址
res.forEach(file => {
fileIds.push(file.id)
})
this.fileListIds = fileIds
}).catch(error => {
console.error(error)
this.$message.error(‘文件上传失败‘)
})
}
},
beforeUpload () {
// return false
},
handleUp () {
const upimgids = this.fileListIds.join(‘,‘)// 这就是上传给后台的图片id
......调接口干其他事比如和表格数据一起上传
}
}
}