前端框架 vue + antvue + ts + axios
場景： 實現匯出zip包到本地，匯出的zip包可以再編輯後匯入系統

匯出功能

將資料流轉成zip下載到本地
功能實現

 async handleExport() {
    this.exportLoading = true  // 觸發介面前loading
    const res = await service.getExportApp(this.appData.id)
    this.exportLoading = false // 介面響應完結束loading
    const blob = new Blob([res], { type: 'application/zip' })   // 指定格式
    const link = document.createElement('a'); 
    link.href = URL.createObjectURL(blob);
    link.download = this.appData.label;  // 指定匯出名稱
    link.click();
    URL.revokeObjectURL(link.href);
    this.$message.success('應用匯出成功')
  }

 

設定請求頭，後臺返回資料流型別前端一定要設定responseType
沒設定responseType匯出到本地的zip是解壓不出來的（改成txt字尾就 可以開啟裡面只有一個false）

/**
 * 匯出應用
 * @param id 應用id
 */
export const getExportApp = (id) => {
  const params: object = {
    headers: {
      'Content-Type': 'application/json; charset=utf-8'
    },
    responseType: 'blob' // 表明返回伺服器返回的資料型別
  }
  return axios.get(`/export/${id}`, params)
};
 

匯入功能

使用了ant-vue 的upload元件，後臺需要的引數是檔案流，需要用new FormData();
beforeUpload 方法返回false來阻止預設上傳行為(沒返回false的話會觸發預設的action行為，就算沒設定action也會請求一個空的介面）
使用customRequest 通過覆蓋預設的上傳行為，自定義自己的上傳實現

// 模板
<a-upload-dragger
     name="file"
     accept=".zip"
     :show-upload-list="false"
     :before-upload="beforeUpload"
     @customRequest="handleUpload"
 >
   <p class="ant-upload-drag-icon">
          <a-icon type="upload" />
    </p>
    <p class="ant-upload-text">
            點選拖拽上傳
    </p>

</a-upload-dragger>
 

js 實現

// 上傳之前
  beforeUpload(file: any) {
    this.handleUpload(file);
    return false;
  }
  // 自定義上傳方法（校驗可以放這兒）
  handleUpload(file: any) {
    console.log('beforeUpload')
    const ext: string = file.name.split('.').pop();
    if (!this.checkFileType(ext)) {
      this.$message.warning(`不支援 ${ext} 格式的圖片!`);
    } else {
      this.upload(file)
    }
  }
  // 上傳
  async upload(file: any) {
    const formData = new FormData();
    console.log(file)
    formData.append('file', file);  // 轉換成檔案流
    const { code, data } = await service.putImportApp(formData)
    if (code === 0) this.success = true
  }

匯入匯出的請求頭跟預設的請求頭不一致，都需要重新設定
使用form-data 可傳輸大型二進位制資料或者包含非ASCII字元的資料

/**
 * 匯入應用
 * @param params 需要匯入的檔案 file : Zip
 */
export const putImportApp = (query) => {
  const params: object = {
    headers: {
      'Content-Type': 'multipart/form-data' 
    },
  }
  return axios.put(`/import`, query, params)
};