ant design vue上传文件_antd vue 表单

ant design vue上传文件_antd vue 表单antdvue文件上传实例说明该实例是后端进行文件上传至minio服务器这里仅仅是展示前端antdvue得代码限制文件类型配置查看这里<template><a-upload:headers=”headers”:action=”url”:fileList=”fileList”@change=”handleChang…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

antd vue 文件上传实例

说明

该实例是后端进行文件上传至minio服务器
这里仅仅是展示前端antd vue得代码

限制文件类型配置查看
这里

<template>
  <a-upload
    :headers="headers"
    :action="url"
    :fileList="fileList"
    @change="handleChange"
    :beforeUpload="beforeUpload"
  >
    <a-button :disabled="isShow"> <a-icon type="upload" /> Upload </a-button>
  </a-upload>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'MinioUplode',
  // 此处接收仅仅针对有有父组件得情况,如果直接使用a-upload则不需要
  props: {
    url: {
      type: String,
      default: 'api/storage/upload'
    },
    fileListTemp: {
      type: Array,
      default: () => []
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      fileList: this.fileListTemp,
      // 请求头里要携带token用来识别身份
      headers: {
        'Authorization': 'Bearer' + this.token()
      }
    }
  },
  methods: {
    ...mapGetters(['token']),
    // 此方法主要用来处理回显列表,以及去除没有实际上传得文件
    // 图片一旦长传在file中会有status字段,如果没有则没有实际上传
    // status有四种状态  'uploading' 'done' 'error' 'removed'
    handleChange (info) {
      let fileList = [...info.fileList]
      // 这里用来处理,页面中展示已经上传得个数
      // .slice(),括号里是负数是从尾部开始截取 限制最长15
      fileList = fileList.slice(-15)
      // 此处去除fileList中status为undefined得对象
      // 注意此处不是null!!!!
      fileList = fileList.filter(item => item.status !== undefined)
      // 从后端得回调 response 中获取url,并复制给fileList对象得url
      // 作用,有了url 前端才可以下载查看
      fileList = fileList.map(file => {
        if (file.response) {
          // 获取回调url
          file.url = file.response.data.url
        }
        return file
      })
      this.fileList = fileList
    },
    beforeUpload (file) {
      // 此处针对修改操作时,如果之前没有数据this.fileList时null 进行...this.fileList会报错
      // 错误类型: Invalid attempt to spread non-iterable instance
      if (this.fileList === null) {
        this.fileList = []
      }
      const list = [...this.fileList]
      // 限制最多只能穿15个文件
      const listLength = list.length > 14
      console.log(list.length, 'list.length')
      if (listLength) {
        this.$message.warning('最多上传15个文件')
      }
      // 限制单个文件的大小不大于100MB
      const size = file.size / 1024 / 1024 > 100
      if (size) {
        this.$message.warning('上传文件不能大于100MB')
      }
      // 返回时注意,此处要把所有得标识flag全部返回并且使用&
      // 原因:有一个条件不满足,就不能进行文件上传
      return !size && !listLength
    }
  },
  // 此处监听仅仅针对有有父组件得情况,如果直接使用a-upload则不需要
  watch: {
    fileList (val) {
      this.fileList = val
      // 向父组件更新
      this.$emit('updateFileList', val)
    },
    fileListTemp (val) {
      this.fileList = val
    }
  }
}
</script>
<style scoped>
</style>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/170645.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • conductor 系统任务

    conductor 系统任务动态任务 参数 dynamicTaskN 来自任务输入的参数的名称 其值用于调度任务 例如如果参数的值为 ABC 则调度的下一个任务类型为 ABC Example name user task taskReferenc t1 inputParamet files work

    2025年6月24日
    0
  • idea永久激活注册码 3月最新注册码

    idea永久激活注册码 3月最新注册码,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月14日
    86
  • 数据库锁概述[通俗易懂]

    数据库锁概述[通俗易懂]行锁和表锁主要是针对锁粒度划分的,一般分为行锁、表锁、库锁行锁:访问数据库的时候,锁定整个行数据,防止并发错误。表锁:访问数据库的时候,锁定整个表数据,防止并发错误。二者的区别:表锁:开销小,加锁快,不会出现死锁;锁定粒度大,发生锁冲突概率高,并发度最低。行锁:开销大,加锁慢,会出现死锁;锁定粒度小,发生锁冲突的概率低,并发度高。乐观锁和悲观锁乐观锁:顾名思义,就是很乐观,每次去拿数据的时候都认为别人不会修改,所以不会上锁,但是在更新的时候会判断一下在此期间别人有没有更新这个数据,可以使用版

    2022年6月18日
    43
  • 几种开源分词工具的比較

    几种开源分词工具的比較

    2021年12月16日
    35
  • S3C2440C语言点灯[通俗易懂]

    S3C2440C语言点灯[通俗易懂]第一代程序员使用机器码第二代程序员使用汇编第三代程序员使用C语言C语言相较于汇编和机器码是一个更高级的语言,我们使用的技术也应该与时俱进之前控制寄存器是配置GPFCON和GPFDAT寄存器,通过地址访问,所以可以用C语言来进行对地址的访问。GPFCON——0x5600,0050GPFDAT——0x5600,0054目录S3C2440芯片手册导读用指针表示S3C2440芯片手册导读对于GPFCON,只用到了16位对于GPFDAT,只用到了8位我们仍然可以以32位,就是4字节的

    2022年6月13日
    21
  • Android Material design

    Android Material design

    2022年3月3日
    37

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号