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

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 => {
posted @ 2024-01-30 10:36  彭成刚  阅读(20)  评论(0编辑  收藏  举报