ant-design-vue实现文件上传（一）

<div id="fileUpload">
            <a-form-item :labelCol="labelCol"
                         :wrapperCol="wrapperCol"
                         label="文件"
                         extra="最多5个;附件格式:pdf、word、excel、ppt、png、jpg、jpeg、 
                                png、zip、rar文件大小不超过512MB;"
                         has-feedback>
              <a-upload
                v-decorator="['attachData',
                  {
                    valuePropName: 'fileList',
                    getValueFromEvent: normFile,
                     rules: [{ required: true, message: '请选择文件上传！'}]
                  }
                 ]"
                name="file"
                list-type="picture"             
 accept=".pdf,.doc,.docx,image/jpeg,image/jpg,image/png,.xlsx,.xls,.ppt,.zip,.rar"
                :beforeUpload="beforeUpload"
                :remove="remove"
                :data="uploadData"
                @change="handleChange"
                :action="uploadUrl"
                :data="uploadData"
              >
                <a-button>
                  <a-icon type="upload"/>
                  上传申报文件
                </a-button>
              </a-upload>
            </a-form-item>
          </div>

文件上传的控件包括一些说明和上传文件类型的限制

里面主要的属性：

beforeUpload ：上传之前做一些处理 比如文件类型的判断，文件大小的判断等等

 beforeUpload (file, fileList) {
      this.fileList = [...this.fileList, file]
      let flieArr = file.name.split('.')
      let fileaccept = ['pdf', 'doc', 'docx', 'jpg', 'jpeg', 'png', 'xlsx', 'xls', 'ppt', 'zip', 'rar']
      let suffix = flieArr[flieArr.length - 1]
      // 获取类型结果
      let result = fileaccept.some(function (item) {
        return item === suffix
      })
      return new Promise((resolve, reject) => {
        if (fileList.length + this.fileList.length > 6) {
          this.$message.warning(`最大上传数量为5`)
          this.fileList.splice(5 - this.fileList.length)
          this.fileList.pop()
          reject(new Error('最大上传数量为5'))
        } else if (!result) {
          this.$message.warning('上传格式不正确')
          this.fileList.pop()
          reject(new Error('上传格式不正确'))
        } else if (file.size > (512 * 1024 * 1024)) { // 判断文件大小是否超标
          const errorMsg = `${file.name}超过512M大小的限制!`
          this.$message.warning(errorMsg)
          this.fileList.pop()
          reject(new Error(errorMsg))
        } else {
          this.uploadData.currentSize = file.size
          this.uploadData.fileName = file.name
          resolve()
        }
      })
    },

 

remove：删除上传文件的处理

  remove (file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.splice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },

action：上传的链接

 uploadUrl: /rest/upload,//需要代理

 

data：  上传的携带的参数

    // 上传参数
      uploadData: {
        downloadFlag: 1,
        currentSize: 0,
        appendFlag: true,
        position: 0,
        times: -1,
        fileName: '',
        publicFlag: false
      },

 

change：上传改变触发，可以判断是否上传成功