网络框架用到的是axios这里采用的是form-data的方式进行文件上传.表单.

控件用的是antDesign的文件上传,返回的是一个filelist的文件列表.

请求参数的封装,关于formdata的append函数

FormData 接口的append() 方法 会添加一个新值到 FormData 对象内的一个已存在的键中，如果键不存在则会添加该键。

跟常规表单数据一样，你可以使用同一个名称添加多个值

const formData = new FormData()
fileList.forEach(file => {
  formData.append('file', file)
})
uploadAttachments(formData).then(res => {
  if (res.code == api.sucess) {
    this.$message.success('上传附件成功')
    this.handleSubmit()
  } else {
    this.$message.success('上传附件失败')
  }
}).catch(err => {
  this.uploading = false
})

可以封装一些自己需要的参数,

//上传文件
export function uploadAttachments (params) {
  return new Promise((resolve, reject) => {
    p(api.UploadAttachments, params, { 'Content-Type': 'multipart/form-data' }).then((res) => {
      resolve(res)
    }).catch((err) => {
      //处理网络异常
      console.error(err)
      reject()
    })
  })
}

// 导出ajax请求方法，统一使用post请求
export function p (url, params,header) {
  params = params || {}
  return new Promise((resovle, reject) => {
    let headers = header==null||header==undefined?{}:header
    let param = params
    axios.post(url, param, {
      headers: headers
    }).then(response => {
      if (response.data.code == 'UNAUTH') {
        store.dispatch('Logout').then(() => {
          setTimeout(() => {
            window.location.reload()
          }, 1500)
        })
      } else {
        resovle(response.data)
      }

    }, error => {
      reject(error)
    }).catch((error) => {
      reject(error)
    })
  })
}

下载

下载的时候设置一下responseType: 'blob'表明上传的是原始数据的类文件对象

attachmentName是需要保存生成的文件名字.带后缀的,比如1.png这种.不然的话默认保存的是txt.是无法打开的,这个是一个要记住的重点,

export function downloadFetch (url, params) {
  params = params || {}
  return new Promise((resovle, reject) => {
    let headers = {}
    let param = params
    axios.post(url, param, {
      headers: headers,
      responseType: 'blob' // 表明返回服务器返回的数据类型
    }).then(response => {
      var params=JSON.parse(response.config.data);
      var data=response.data
      var attachmentName=params.attachmentName
      if (!attachmentName){
        return
      }
      if (data) {
        if (!data) {
          return
        }
        let url = window.URL.createObjectURL(new Blob([data]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download',attachmentName)

        document.body.appendChild(link)
        link.click()
      } else {
        resovle({ code: 'FAILED', msg: '下载失敗' })
      }

    }, error => {
      reject(error)
    }).catch((error) => {
      reject(error)
    })
  })
}// 导出ajax请求方法，