Внешний интерфейс загружает обычные файлы и бинарные потоковые файлы.

Vue.js
Внешний интерфейс загружает обычные файлы и бинарные потоковые файлы.

Файлы внешней загрузки обычно сталкиваются с двумя ситуациями:

  1. Когда файл загружается на сервер ресурсов, серверная часть сохраняет только адрес файла, а передняя часть получает адрес файла, возвращенный серверной частью, и загружает его напрямую.
  2. Файл хранится на внутреннем сервере (обычно динамически генерируется в соответствии с параметрами внешнего интерфейса временно и удаляется по мере использования), а внутренний сервер считывает файл и возвращает двоичный поток файла на внешний сервер. конец.

Ниже приведен пример загрузки файла Excel для имитации и отображения этих двух ситуаций. (Предварительная подготовка: vscode, node8+, vue-cli3.5+).

1. Скачать прямо с адреса файла

Создайте новый сервисный каталог в тестовом пустом каталоге, чтобы имитировать серверную часть, и создайте новый файл index.html для имитации внешнего интерфейса.

Создайте новый файл excel test.xlsx в каталоге службы для загрузки.

Установите serve для запуска сервера статических ресурсов.

npm install -g serve

Войдите в каталог службы и запустите службу

cd service 
serve -s

На данный момент адрес тестового файла:http://localhost:5000/test.xlsx

Поместите тег a на страницу, напишите путь к файлу в href и напишите атрибут загрузки.

<a href="http://localhost:5000/test.xlsx" download>点击下载</a>

Откройте index.html в браузере и нажмите «Загрузить».

Эта загрузка эквивалентна запросу на получение, браузер напрямую обращается к адресу статического ресурса, а атрибут загрузки сообщает браузеру, что тег a должен не открывать предварительный просмотр страницы, а загружать.

Это не имеет ничего общего с запросом интерфейса через ajax в реальных проектах, нужно только запросить как обычно, потому что бэкенд возвращает только адрес файла, после получения адреса его можно привязать в теге а или скачать через window.open() Больше никаких демонстраций только в проектах.

Два, загрузка файла бинарного потока

Эта ситуация, как правило, представляет собой метод интерфейса запроса ajax, используемый в реальном проекте, например, почтовый запрос, интерфейс передает несколько параметров, а сервер возвращает двоичный поток файла.

Удалите index.html, вернитесь в тестовый каталог и используйте vue-cli для создания проекта vue.

cd ../
vue create demo

Выберите самый простой шаблон по умолчанию, войдите в каталог проекта для установки axios после создания и, наконец, запустите его.

cd demo
npm i axios --save
npm run serve

Удалите лишнее содержимое в src/App.vue и добавьте кнопку загрузки.

<input type="button" value="点击下载">

Создайте service.js в каталоге службы, чтобы написать интерфейс загрузки.

Справка о настройках междоменного корса:nuggets.capable/post/684490…

const http = require("http");
const fs = require("fs");

// 创建服务
const server = http.createServer((req,res) => {  
  // 下载接口  
  if(req.url === "/download") {    
    res.writeHead(200, {      
      "Content-type": "application/vnd.ms-excel", // 返回excel文件            
      // 跨域设置      
      "Access-Control-Allow-Origin": "*",      
      "Access-Control-Allow-Headers": "content-type"    
    })

    // 异步读取文件内容    
    fs.readFile("test.xlsx", (err, data) => {       
      // 返回二进制流文件        
      res.end(data)    
    })  
  }
})

// 服务启动在3000端口
server.listen(3000)
console.log("server run at 3000")

Откройте новое окно терминала в каталоге службы и запустите серверную службу.

node service.js

Вернитесь в App.vue и добавьте событие клика к кнопке загрузки.

<input type="button" value="点击下载" @click="handleDownload">

handleDownload() {  
  axios({    
    method: 'post',    
    url: "http://localhost:3000/download",    
    data: {      
      test: "test data"    
    } 
  }).then(response => {      
      console.log(response.data)  
   })
},

В этот момент нажмите «Загрузить», и вы увидите, что возвращенный результат искажен.

Фактически, основной принцип такой же, как и при обычной загрузке, описанной выше, которая заключается в загрузке через адрес файла, поэтому ключ теперь состоит в том, чтобы сгенерировать URL-адрес файла из этих двоичных данных.

Во-первых, установите элемент конфигурации axios для возврата результата в двоичном формате.

axios({  
  method: 'post',  
  url: "http://localhost:3000/download",  
  data: {    
    test: "test data"  
  },  
  responseType: "arraybuffer" // arraybuffer是js中提供处理二进制的接口
})

После получения возвращенных данных сгенерируйте URL-адрес файла из двоичных данных.При использовании URL.createObjectURL для генерации URL-адреса вам необходимо передать параметры типа Blob.

О типах BLOB-объектов:nuggets.capable/post/684490…

После того, как URL сгенерирован, тег a моделируется для загрузки.

.then(response => {          
  // 用返回二进制数据创建一个Blob实例          
  let blob = new Blob([response.data], {            
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", 
  }) // for .xlsx files          

  // 通过URL.createObjectURL生成文件路径          
  let url = window.URL.createObjectURL(blob)          

  // 创建a标签          
  let ele = document.createElement("a")          
  ele.style.display = 'none'          

  // 设置href属性为文件路径，download属性可以设置文件名称          
  ele.href = url          
  ele.download = "测试文件"          

  // 将a标签添加到页面并模拟点击          
  document.querySelectorAll("body")[0].appendChild(ele)          
  ele.click()          

  // 移除a标签          
  ele.remove()        
});

Вернитесь в браузер и нажмите «Загрузить», на этот раз файл двоичного потока успешно загружен.

Заканчивать

Категории