Ant Design Vue 上传组件使用示例 - 图片上传、预览、移除功能

<template>
  <div class='clearfix'>
    <a-upload
      action='#'  
      :customRequest='uploadImage'
      list-type='picture-card'
      :file-list='fileList'
      @preview='handlePreview'
      :beforeUpload='planFileUploadPre'
      :remove='handleRemove'
    >
      <div>
        <a-icon type='plus' />
        <div class='ant-upload-text'>
          Upload
        </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 { uploadFile } from '@/api/upload'
import { getFileUrl } from '@/utils/util'
<p>function getBase64(file) {
return new Promise((resolve, reject) =&gt; {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () =&gt; resolve(reader.result)
reader.onerror = error =&gt; reject(error)
})
}</p>
<p>export default {
data() {
return {
previewVisible: false,
previewImage: '',
fileList: []
}
},
methods: {
handleCancel() {
this.previewVisible = false
},
async handlePreview(file) {
if (!file.url &amp;&amp; !file.preview) {
file.preview = await getBase64(file.originFileObj)
}
this.previewImage = file.url || file.preview
this.previewVisible = true
},
/**
* 上传招标类目文件之前的校验
<em>/
planFileUploadPre(file) {
if (!(file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/gif' || file.type === 'image/bmp')) {
this.$message.error('文件格式错误，请上传正确的文件！')
return false
}
},
/</em>*
* 自定义上传
*/
uploadImage(file) {
console.log(file)
const formData = new FormData()
formData.append('file', file.file)
uploadFile(formData).then(res =&gt; {
console.log(res)
if (res.data.code === 0) {
this.$message.success(<code>文件上传成功</code>)
this.fileList.push({
uid: file.file.uid,
name: 'image.png',
status: 'done',
url: getFileUrl(res.data.fileName)
})
} else {
this.$message.error(res.data.msg)
}
})
},
handleRemove(fileList) {
const imgUid = this.fileList.findIndex(item =&gt; item.uid === fileList.uid)
this.fileList.splice(imgUid, 1)
}
}
}
</script></p>
<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>