在这里插入图片描述
先看文档,change事件以及参数,文档写的真的很详细
在这里插入图片描述
在这里插入图片描述
再看代码,beforeUpload文件上传前返回false停止上传,file-list已经上传的文件列表
在这里插入图片描述
在这里插入图片描述

  <a-upload-dragger :multiple="false" :file-list="fileList" :beforeUpload="beforeUpload" @change="handleChange">
        <p class="ant-upload-drag-icon">
          <a-icon type="inbox" />
        </p>
        <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
        <p class="ant-upload-hint">
          支持扩展名:.rar .zip .doc .docx .pdf .jpg ...
          <br />
          文件大小:最大支持30M
        </p>
      </a-upload-dragger>
    </a-form>

    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button :disabled="fileList.length <= 0" type="primary" :loading="loading" @click="handleSubmit">确定</a-button>
    </template>

最主要的是change事件

 	beforeUpload(file) {
      return false
    },
    
    handleChange({ file, fileList }) {
      console.log(file,'file');
      const { $message } = this
      if (file.status === 'removed') {
        this.fileList = []
      } else {
        const isLt30M = file.size / 1024 / 1024 < 30
        if (!isLt30M) {
          $message.warning('资源包不能超过30MB')
        } else {
          this.fileList = [file]
        }
      }
    },

打印一下file,当前操作的文件对象
在这里插入图片描述
当移除文件后
在这里插入图片描述
文件上传之后点击确认按钮,调后台的接口

在data中定义

  resourceData: {},
      fileList: []
handleSubmit() {
      const {
        $message,      
        resourceData
      } = this

      if (this.fileList.length <= 0) {
        $message.warning('请选择上传的资源包')
        return false
      }
          this.loading = true
          const file = this.fileList[0]
          const formData = new FormData()
          if (resourceData.fPkResourcePacketId) {
            formData.append('ResourcePacketId', resourceData.ResourcePacketId)
          } else {
            formData.append('DataPacketId', resourceData.DataPacketId)
          }
          formData.append('ResourceName', resourceData.ResourceName)
          formData.append('ResourceFormat', resourceData.ResourceFormat)
          formData.append('file', file)

          saveOrUpdate(formData)
            .then(res => {
              if (res && res.code == 0) {
                this.$emit('ok')
                this.visible = false             
                this.fileList = []
              } else {
                $message.error(res.msg || '上传资源包失败')
              }
            })
            .catch(err => {
              $message.error('请求失败,请稍后重试')
            })
            .finally(() => {
              this.loading = false
            })
    }

调完接口上传成功后,headers的Form Data中的参数如下,把接口需要的参数,通过 formData.append的方式添加
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐