vue结合后端本地上传文件

最新推荐文章于 2024-08-21 04:35:59 发布

Rainy_X

最新推荐文章于 2024-08-21 04:35:59 发布

阅读量723

点赞数 1

分类专栏： vue es6 文章标签： vue.js es6

本文链接：https://blog.csdn.net/rainy_x/article/details/107069167

版权

vue 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

es6

3 篇文章 0 订阅

订阅专栏

//按钮
	<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'
  })
}