vue結合後端本地上傳文件

//按鈕
	<a-upload :beforeUpload="beforeUpload" :showUploadList="false">
        <a-button type="primary" icon="upload">導入</a-button>
      </a-upload>
      <a-button @click="downExcel" type="primary" icon="download">導出</a-button>
methods下

//引入
import { downFileExcel } from '@/api/manage'
 // 導入文件
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        let fileType = file.type
        if (
          fileType.indexOf('application/vnd.ms-excel') < 0 &&
          fileType.indexOf('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') < 0
        ) {
          this.$message.warning('請上傳excl')
          reject(false)
        } else {
          let formData = new FormData()
          formData.set('file', file)

		//	後端接口
          importExcel(formData).then(res => {
            if (!res.msg) {
              resolve(file)
              this.$message.success('上傳成功')
              setTimeout(() => {
                // this.$router.go(0)
                this.$refs.modalTable.loadData(true)
              }, 500)
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    // 下載模板
    downExcel(fileName) {
      if (!fileName || typeof fileName != 'string') {
        fileName = `遊戲列表-${dayjs().format('YYYY-MM-DD')}` //自定義文件名
      }
      let param = {}
      downFileExcel(this.exportXlsUrl, param).then(data => {
        if (!data) {
          this.$message.warning('文件下載失敗')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data]), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], { type: 'application/octet-stream' }))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下載完成移除元素
          window.URL.revokeObjectURL(url) //釋放掉blob對象
        }
      })
    }

api文件下的manage.js

/**
 * 下載文件 用於excel導出
 * @param url
 * @param parameter
 * @returns {*}
 */
export function downFile(url,parameter){
  return axios({
    url: url,
    params: parameter,
    method:'get' ,
    responseType: 'blob'
  })
}

export function downFileExcel(url,parameter){
  return axios({
    url: url,
    data: parameter,
    method:'post' ,
    responseType: 'blob'
  })
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章