<template>
<a-form-item label="图片上传(最多上传9张)" >
<a-upload
name="file"
list-type="picture-card"
:file-list="fileList"
:showUploadList="true"
data-type="jpg|png|jpeg"
ref="files"
:before-upload="beforeUpload"
@change="handleChange"
:remove="handleRemove"
@preview="handlePreview"
multiple
style="margin-left: 10%"
>
<div v-if="fileList.length < 9" id="container">
<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>
</a-form-item>
</template>
<script>
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 {
visible: false,
// 中国地域城市code集合
fileList: [],
flag: true,
previewVisible: false,
previewImage: ''
}
},
methods: {
// 关闭模态框(图片预览)
handleCancel () {
this.previewImage = ''
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
},
// 删除照片
handleRemove (file) {
const index = this.fileList.indexOf(file)
const newFileList = this.fileList.slice()
newFileList.splice(index, 1)
this.fileList = newFileList
this.Product.images.splice(index, 1)
this.flag = false
},
// 上传图片之前的校验
beforeUpload (file) {
if (this.fileList.length === 10) {
this.$message.warn('只能上传9个文件')
const newFileList = this.fileList.slice()
newFileList.splice(-1, 7)
this.fileList = newFileList
} else {
this.fileList = [...this.fileList, file]
}
// 获得允许上传的文件类型
var type = this.$refs.files.$attrs['data-type']
for (let item of this.fileList) {
var exName = item.name.split('.')[1]
if (type.indexOf(exName) === -1) {
this.$message.error('请检查文件类型,只允许上传图片文件')
const index = this.fileList.indexOf(file)
this.fileList.splice(index, 1)
break
}
// 判断文件大小
if (item.size / 1024 / 1024 > 20) {
this.$message.error('上传文件大小不能超过20MB')
break
}
}
return false
},
// 上传图片方法
handleChange (file) {
// 当删除的时候会触发onchange事件 因此使用flag控制onchange事件
if (this.flag === true) {
const formData = new FormData()
formData.append('file', file.file)
this.fileList = file.fileList
this.$upload(methods, formData).done((res) => {
if (res.data.code === '500') {
this.$message.error(res.data.message)
this.fileList = []
this.Product.images = []
}
if (res.data.code === '200') {
this.$message.success(res.data.message)
this.Product.images.push(res.data.data)
}
})
} else {
this.flag = true
}
}
}
}
</script>
antd for vue 使用图片上传组件
最新推荐文章于 2024-06-19 19:25:56 发布