antd for vue 使用图片上传组件

最新推荐文章于 2025-06-04 16:34:03 发布

原创最新推荐文章于 2025-06-04 16:34:03 发布 · 1.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

工具专栏收录该内容

12 篇文章

订阅专栏

这段代码展示了如何使用Ant Design的<a-upload>组件实现图片上传功能，包括限制上传数量、文件类型、大小，以及预览、删除和上传图片到服务器的逻辑。同时，它还包含了一个图片预览的模态框，用于展示所选图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>