Upload e Download de Ficheiros
Vamos entrar no diretório do exemplo Todo e instalar a multipart/form-data, extensão com o seguinte comando:
cd todo-listnpm install
--save multer1º : vincular o componente multer no aplicativo
Em src/application.ts, vincule os componentes de autenticação à classe do seu aplicativo.
2º : Criar o FileUploadController para Upload, com o seguinte comando crie o controlador vazio:
lb4 controller
Em src a crie um diretório de nome ‘services’ passando a ficar src/services , de seguida criar dois ficheiros index.ts e file-upload.service.ts respetivamente.
A seguir, adicionaremos a src/services/index.ts
export * from ‘./file-upload.service’;
Em src cria dois ficheiros types.ts e o keys.ts
Adiciona o seguinte código no src/types.ts:
import {RequestHandler} from 'express-serve-static-core';export type FileUploadHandler = RequestHandler;
Adiciona o seguinte código no src/keys.ts:
import {BindingKey} from '@loopback/core';
import {FileUploadHandler} from './types';/**
export const FILE_UPLOAD_SERVICE = BindingKey.create<FileUploadHandler>(
'services.FileUpload',
export const STORAGE_DIRECTORY = BindingKey.create<string>(
'storage.directory'
);
3º : Criar o FileDownloadController para Download com o seguinte comando crie o controlador vazio:
lb4 controller
4º : Crie uma IU simples para interagir
Em public/index.html adicione as seguintes funções JavaScript:
function setupUploadForm() {
const formElem = document.getElementById(‘uploadForm’);
formElem.onsubmit = async e => {
e.preventDefault();
const res = await fetch(‘/files’, {
method: ‘POST’,
body: new FormData(formElem),
});
const body = await res.json();
console.log(‘Response from upload’, body);
await fetchFiles();
};
}
async function fetchFiles() {
const res = await fetch(‘/files’);
const files = await res.json();
console.log(‘Response from list’, files);
const list = files.map(f => `<li><a href=”/files/${f}”>${f}</a></li>\n`);
document.getElementById(‘fileList’).innerHTML = list.join(‘’);
}
async function init() {
setupUploadForm();
await fetchFiles();
}
E o seguinte html que tem duas divisões principais:
- Um formulário para seleção e upload de arquivos
- Uma lista de arquivos com links de URL para download
<body onload=”init();”>
<div class=”info”>
<h1>File upload and download</h1><div id=”upload”>
<h3>Upload files</h3>
<form id=”uploadForm”>
<label for=”files”>Select files:</label>
<input type=”file” id=”files” name=”files” multiple /><br /> <br />
<label for=”note”>Note:</label>
<input
type=”text”
name=”note”
id=”note”
placeholder=”Note about the files”
/>
<br /><br />
<input type=”submit” />
</form>
</div><div id=”download”>
<h3>Download files</h3>
<ul id=”fileList”></ul>
<button onclick=”fetchFiles()”>Refresh</button>
</div><h3>OpenAPI spec: <a href=”/openapi.json”>/openapi.json</a></h3>
<h3>API Explorer: <a href=”/explorer”>/explorer</a></h3>
</div><footer class=”power”>
<a href=”https://loopback.io” target=”_blank”>
<img
src=”https://loopback.io/images/branding/powered-by-loopback/blue/powered-by-loopback-sm.png”
/>
</a>
</footer>
</body>
De seguida vamos rodar com o seguinte comando no terminal para testar todo o nosso codigo:
npm start
Url resquest http://localhost:3000
