vue文件下载和上传

本文实现文件下载的两种方式。第一种:文件流形式,第二种接口返回url地址
一、文件流形式( responseType: 'blob',)
1、js文件封装axios

 export function controlsExport(params) { //微站站点导出
  return request({
    responseType: 'blob',
    url: '/ebap-business/a/control/exportControl',
    method: 'post',
    data:params
  })
}

2、vue文件引入axios api
import { batchImportList, batchImportExport } from '@/api/trading-resource'
vue文件调用方法
实现方案一:

methods: {
     exportList(row) {
      batchImportExport({
        logId: row.id, // 记录id
        exportFlag: 0, // 导出标识 0 代码失败
      }).then((response) => {
        const blob = new Blob([response.data]); //new Blob([res])中不加data就会返回下图中[objece objece]内容(少取一层)
        let result = response?.headers['content-disposition'];
        let filename = result.split(';')[1].split('=')[1] || '导出失败数据.xlsx';
        const fileName = decodeURIComponent(filename); //下载文件名称
        const elink = document.createElement('a');
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
      });
    },
}

实现方案二:

methods: {
    // 导出历史记录数据
    async exportList(row) {
      this.exportLoading = true;
      let res = await batchImportExport({
        logId: row.id, // 记录id
        exportFlag: 0, // 导出标识 0 代码失败
      });
      try {
        let enc = new TextDecoder('utf-8');
        res = JSON.parse(enc.decode(new Uint8Array(res.data))); //转化成json对象
        this.$message.error(res.message);
      } catch (error) {
        this.downloadFile(res, () => {
          this.$message.success('导出成功');
        });
      }
    },
    // 下载文件
    downloadFile(res, callback, filename) {
      let result = res?.headers['content-disposition'];
      let fass = result.split(';')[1].split('=')[1] || '导出失败数据.xlsx';
      // let fass = result.slice(result.indexOf('=') + 2, result.length - 1) || '导出失败数据.xlsx';
      filename = filename || decodeURIComponent(fass);
      let blob = new Blob([res.data], {
        type: 'application/octet-stream',
      });
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        window.navigator.msSaveBlob(blob, filename);
      } else {
        var blobURL = window.URL.createObjectURL(blob);
        var tempLink = document.createElement('a');
        tempLink.style.display = 'none';
        tempLink.href = blobURL;
        tempLink.setAttribute('download', filename);
        if (typeof tempLink.download === 'undefined') {
          tempLink.setAttribute('target', '_blank');
        }
        document.body.appendChild(tempLink);
        tempLink.click();
        document.body.removeChild(tempLink);
        window.URL.revokeObjectURL(blobURL);
      }
      callback && callback();
    },
}

二、接口返回url地址(正常接口获取就行)

methods: {
  handleDownload(row) {
         loadFile({id:row.id}).then(res =>{
           const ele = document.createElement('a');
           ele.setAttribute('href', res.data); //设置下载文件的url地址
           let str=res.data.substring(res.data.lastIndexOf("/"));
           let str2=str.split('/')[1];
           ele.setAttribute('download',str2);//用于设置下载文件的文件名
           ele.click();
         })
     }
}

三、Vue 实现文件的上传

<template>
      <el-form-item>
        <div v-if="file.name" class="template-upload template-name">
          <span class="file">
            {{ file.name }}
          </span>
          <i class="el-icon-delete" @click.stop="file = {}"></i>
        </div>
        <label v-else>
          <span class="el-button el-button--primary el-button--small template-upload">
            上传文件
          </span>
          <input ref="update" hidden type="file" accept=".xlsx,.xls" @change="inputChange" />
        </label>
        <div class="template-form-remark">*最多支持一次性上传1000个资源</div>
      </el-form-item>
</template>
methods: {
    // 确定
    async saveUploadData() {
      if (!this.file.name) return this.$message.error('请先选择上传文件');
      this.loading = true;
      try {
        this.form.append('classCode', this.templateForm.value);
        await batchImportUpload(this.form);
        this.$message.success('上传成功');
        this.isShow = false;
        this.loading = false;
        this.$emit('upload');
      } catch (error) {
        this.loading = false;
        this.$message.error(error?.message || error);
      }
    },
    inputChange() {
      const file = this.$refs.update.files?.[0];
      this.$refs.update.value = '';
      this.form = new FormData();
      this.form.append('file', file);
      this.file = file ?? this.file;
    },
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容