Ant-design-vue2 upolad组件 customRequest 上传

最新推荐文章于 2024-06-26 14:17:54 发布

web_Hsir

最新推荐文章于 2024-06-26 14:17:54 发布

阅读量246

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_44185995/article/details/129734122

版权

该文章展示了一个Vue组件uploadFileComp，用于文件上传。组件支持文件大小限制（不超过20MB）和特定文件类型的检查（如PDF）。当用户尝试上传文件时，会进行验证，上传成功后触发更新事件并显示文件名。此外，还提供了删除功能，并在操作过程中显示加载状态。

摘要由CSDN通过智能技术生成

uploadFileComp组件

<template>
  <div>
    <a-spin :spinning="spinning">
      <div v-if="fileInfo.fileName">
        {{ fileInfo.fileName }}
        <a-icon type="delete" style="color:#ff7875" @click="del" />
      </div>
      <a-upload v-else name="file" :customRequest="customRequest" :beforeUpload="beforeUpload">
        <a-button> <a-icon type="upload" /> Upload </a-button>
      </a-upload>
    </a-spin>
  </div>
</template>
<script>
import { upload } from '@/api/upload'
export default {
  props: {
    fileInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      spinning: false
    }
  },
  methods: {
    del() {
      let _this = this
      this.$confirm({
        title: '确认删除?',
        onOk() {
          _this.$emit('update', { fileName: '', url: '' })
        }
      })
    },
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        const isLt20M = file.size / 1024 / 1024 < 20
        const suffix = file.name.substring(file.name.lastIndexOf('.') + 1).toUpperCase()
        const suffixArr = ['PDF']
        if (!isLt20M) {
          this.$message.error('上传图片大小不能超过 20M!')
          return reject(new Error(false))
        }
        if (!suffixArr.includes(suffix)) {
          this.$message.error('上传的文件不符合规范')
          return reject(new Error(false))
        }
        return resolve()
      })
    },
    customRequest(options) {
      this.spinning = true
      const formData = new FormData()
      formData.append('file', options.file)
      upload(formData)
        .then(res => {
          if (res.code === 0) {
            this.$emit('update', res.data)
            options.onSuccess(res, options.file)
          } else {
            this.$message.error({
              content: res.msg
            })
          }
        })
        .catch(err => {
          this.$message.error(err)
        })
        .finally(() => {
          this.spinning = false
        })
    }
  }
}
</script>

页面使用

import uploadFileComp from '@/components/uploadFileComp'
<uploadFileComp :fileInfo="fileInfo" @update="updateFnc"></uploadFileComp>