首页 > 其他分享 >form 表单提交 保存的时候再提交文件,之前一直是选择文件就传了,这个也比较好

form 表单提交 保存的时候再提交文件,之前一直是选择文件就传了,这个也比较好

时间:2024-01-30 10:45:17浏览次数:30  
标签:files 文件 false 提交 form file return data

form 表单提交 保存的时候再提交文件,之前一直是选择文件就传了,这个也比较好

代码

<Upload :action="action"
              :max-size="maxSizeMb"
              :format="format"
              :show-upload-list="false"
              multiple
              :before-upload="handleBeforeUpload"
              :on-exceeded-size="handleMaxSize">
        <Button>
          <TfCommonIcon type="_upload-2-line"
                        color="#2082ED"
                        :size="16"></TfCommonIcon>
          选择文件
        </Button>
      </Upload>

保存

save () {
      if (this.files.length === 0) {
        this.$Message.warning(`文件为空,请重新选择!`)
        return
      }
      this.btnLoading = true
      const fd = new FormData()
      for (let i = 0; i < this.files.length; i++) {
        fd.append('files', this.files[i])
      }
      console.info('this.files', this.files)
      console.info('fd,', fd)
      this.$api(this.action, fd, { contentType: 'multipart' }).then(res => {
        if (res.status !== 20) return
        this.$Message.success(`上传成功`)
        this.files = []
        this.visible = false
        this.$emit('on-emit-upload-success', res.data)
      }).finally(() => {
        this.btnLoading = false
      })
    },

data

data () {
    return {
      visible: false,
      btnLoading: false,
      files: [], // 已选择的文件
      action: `${this.$baseUrl}xxx/xxx/upload`,
      format: ['mp3', 'm4a'], // pcm,wav,ogg(speex),ogg_opus,mp3,aac,m4a格式
      maxSizeMb: 100 // MB
    }
  },

事件

handleMaxSize (file) {
      this.$Notice.warning({
        title: '文件大小超限',
        desc: `文件${file.name}太大,上传文件大小不能超过${this.maxSizeMb}MB`
      })
    },
/**
     * 上传之前的回调
     * @param file
     * @returns {boolean}
     */
    handleBeforeUpload (file) {
      const suffix = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase() // 获取上传的文件后缀
      if (this.format.length > 0 && !this.format.includes(suffix)) {
        this.$Message.warning(`请选择${this.format}格式的文件!`)
        return false
      } else if (file.size > this.maxSizeByte) {
        this.$Message.error(`文件大小超过${this.maxSizeMb}MB,请重新选择!`)
        return false
      } else {
        this.files.push(file)
        return false
      }
    }


api 部分函数

else if (_config['contentType'] === 'multipart') {
    _data = data
    _contentType = 'multipart/form-data'
  }

  // 返回ajax方法
  return axios.request({
    url,
    withCredentials: true, // 单点登录 北京用到session,全局开启
    data: _data,
    headers: {
      'moudleId': 'xxx',
      'Content-Type': _contentType,
      token: getToken() ? getToken() : ''
    },
    method: _config.method,
    responseType: _config.responseType
  }).then(res => {

标签:files,文件,false,提交,form,file,return,data
From: https://www.cnblogs.com/pengchenggang/p/17996597

相关文章

  • Linux环境变量配置文件
    1.什么是环境变量配置文件环境变量-配置文件环境变量是可以在父shell和子shell都生效的变量,Linux允许把本地变量声明为环境变量,但是不会永久生效,一旦重启,就会失效想要永久生效,需要把这个更改放进环境变量配置文件环境变量配置文件中主要是定义对系统的操作环境生效......
  • mips交叉编译相关库文件,主要做以后参考
    1.mips交叉编译paho-mqtt3ascmake-DCMAKE_INSTALL_PREFIX=${pwd}/install-DPAHO_WITH_SSL=TRUE-DPAHO_BUILD_SAMPLES=TRUE-DCMAKE_C_COMPILER=/opt/mips-linux-gnueabihf/bin/mips-linux-gnu-gcc-DPAHO_BUILD_DOCUMENTATION=TRUE-DOPENSSL_LIB_SEARCH_PATH=/usr/mips/lib......
  • prometheus 配置文件汇总
    prometheusprometheus.yaml#myglobalconfigglobal:scrape_interval:15s#Setthescrapeintervaltoevery15seconds.Defaultisevery1minute.evaluation_interval:15s#Evaluaterulesevery15seconds.Thedefaultisevery1minute.#scrape_......
  • 医院如何选择安全合规的内外网文件交换系统?
    医院内外网文件交换系统是专为医疗机构设计的,用于在内部网络(内网)和外部网络(外网)之间安全、高效地传输敏感医疗数据和文件的解决方案。这种系统对于保护患者隐私、遵守医疗数据保护法规以及确保医疗服务的连续性和质量至关重要。医院在选择安全合规的内外网文件交换系统时,应考虑......
  • SpringBoot中集成Minio高性能分布式存储文件服务入门
    场景若依前后端分离版手把手教你本地搭建环境并运行项目:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662参考上面搭建项目。MinioMinio是基于Go语言编写的对象存储服务,适合于存储大容量非结构化的数据,例如图片、音频、视频、日志文件、备份数据和容器/......
  • 小心! Ubuntu更换软件源 时如果随便修改了这个文件,你的Ubuntu可能会起不来!
    目录参考资料什么文件?为什么?正确的换源方法修改sources.list的方法假如换了仓库,还装了软件,起不来怎么办?参考资料ubuntu16.04更换国内源(下载源)(镜像源)(换源)_ubuntu16.04镜像_Dontla的博客-CSDN博客Ubuntu_百度百科-这个用来看Ubuntu名字参考的packagemanagement-Wha......
  • 深入理解 C# 编程:枚举、文件处理、异常处理和数字相加
    C#枚举枚举是一个特殊的“类”,表示一组常量(不可更改/只读变量)。要创建枚举,请使用enum关键字(而不是class或interface),并用逗号分隔枚举项:enumLevel{Low,Medium,High}您可以使用点语法访问枚举项:LevelmyVar=Level.Medium;Console.WriteLine(myVar);Enu......
  • 深入理解 C# 编程:枚举、文件处理、异常处理和数字相加
    C#枚举枚举是一个特殊的“类”,表示一组常量(不可更改/只读变量)。要创建枚举,请使用enum关键字(而不是class或interface),并用逗号分隔枚举项:enumLevel{Low,Medium,High}您可以使用点语法访问枚举项:LevelmyVar=Level.Medium;Console.WriteLine(myVar);En......
  • 文件系统(二):分区、格式化数据结构
    liwen012024.01.28前言生活中,我们买回来的SD卡、TF卡、硬盘等存储设备一般是可以直接使用,如果要改变存储设备上的文件系统格式,我们一般直接在电脑上右键格式化就可以实现。买回来能直接用,是因为存储设备在出厂前厂家就已经做了分区和格式化操作。为什么存储设备需要分区格式......
  • UTF-8格式编码的文件分为带BOM和不带BOM windows下编程,Linux下编程建议使用“UTF-8无
    UTF-8格式编码的文件分为带BOM和不带BOMwindows下编程,Linux下编程建议使用“UTF-8无BOM格式,“建议使用”UTF-8带BOM格式“Notepad++支持“UTF-8无BOM格式”和“UTF-8带BOM格式”两种UTF-8。一直以来不知道二者有什么区别。程序员它们的区别是:UTF-8带BOM格式,就是在文件头添加......