prefácio
Os dias de tufão em casa analisam a realização das funções de download e upload de arquivos!
Baixar Documento
Clique em um botão para baixar um arquivo, um cenário de negócios que ocorre com frequência.
Precisamos definir o responseType no cabeçalho da resposta para informar ao back-end o tipo de dados que precisamos
export const getCartTemplate = () =>
defHttp.get({
url: Api.api_get_cart_template,
// 确保获取类型正确的数据
responseType: 'blob',
headers: {
ignoreCancelToken: true,
},
});
Após obter os dados, crie uma tag para clique automático:
// 这里的res即返回数据
const saveFile = (res) => {
let blob = new Blob([res], {
// 为了保证浏览器能正确的解析Blob URL返回的文件类型，需要在创建Blob对象时指定相应的type 这里指定为.xlsx
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8',
});
// 创建一个临时的url指向blob对象
let url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
// 自定义文件名
a.download = fileName.value;
a.click();
// 释放这个临时的对象url
window.URL.revokeObjectURL(url);
};
Sobre o objeto Blob:
Blob(blobParts[, options])
- blobParts : Tipo de array, cada item no array é conectado para formar os dados do objeto Blob, e cada elemento no array pode ser ArrayBuffer (buffer de dados binários), ArrayBufferView, Blob, DOMString. ou uma mistura de outros objetos semelhantes.
- opções : Opcional, tipo de formato de dicionário, você pode especificar os dois atributos a seguir:
type, o valor padrão é "", que representa o tipo MIME do conteúdo da matriz que será colocado no blob.
endings, o valor padrão é "transparent", que é usado para especificar como a string contendo o terminador de linha \n é gravada. É um dos dois valores a seguir: "native", indicando que o caractere final de linha será alterado para um caractere de nova linha adequado para o sistema de arquivos do sistema operacional host; "transparente", indicando que o caractere final salvo no blob será mantido inalterado.
referência de tipo de tipo:
| Ext | Tipo MIME |
|---|---|
| .doc | aplicativo/msword |
| .ponto | aplicativo/msword |
| .docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
| .dotx | application/vnd.openxmlformats-officedocument.wordprocessingml.template |
| .docm | application/vnd.ms-word.document.macroEnabled.12 |
| .dotm | application/vnd.ms-word.template.macroEnabled.12 |
| .xls | application/vnd.ms-excel |
| .xlt | application/vnd.ms-excel |
| .xla | application/vnd.ms-excel |
| .xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
| .xltx | application/vnd.openxmlformats-officedocument.spreadsheetml.template |
| .xlsm | application/vnd.ms-excel.sheet.macroEnabled.12 |
| .xltm | application/vnd.ms-excel.template.macroEnabled.12 |
| .xlam | application/vnd.ms-excel.addin.macroEnabled.12 |
| .xlsb | application/vnd.ms-excel.sheet.binary.macroEnabled.12 |
| .ppt | application/vnd.ms-powerpoint |
| .Panela | application/vnd.ms-powerpoint |
| .pps | application/vnd.ms-powerpoint |
| .ppa | application/vnd.ms-powerpoint |
| .pptx | application/vnd.openxmlformats-officedocument.presentationml.presentation |
| .potx | application/vnd.openxmlformats-officedocument.presentationml.template |
| .ppsx | application/vnd.openxmlformats-officedocument.presentationml.slideshow |
| .ppam | application/vnd.ms-powerpoint.addin.macroEnabled.12 |
| .pptm | application/vnd.ms-powerpoint.presentation.macroEnabled.12 |
| .potm | application/vnd.ms-powerpoint.presentation.macroEnabled.12 |
| .ppsm | application/vnd.ms-powerpoint.slideshow.macroEnabled.12 |
Upload de arquivo (baseado em ant-design-vue)
Carregue o arquivo após clicar no botão, carregue a senha do arquivo, a senha pode estar vazia!
Seção de modelo:
<a-upload
name="file"
accept=".xls,.xlsx"
:file-list="fileList"
:showUploadList="true"
:withCredentials="true"
:headers="headers"
:before-upload="beforeUpload"
:disabled="loading"
:remove="handleRemove"
>
<a-button>
<SvgIcon name="upload" v-show="!loading" />
{
{ title }}
</a-button>
</a-upload>
Na verdade, é um upload manual. Há um exemplo no documento antd: componente de upload ant-design-vue .
A descrição simples é que dois parâmetros precisam ser adicionados com base no upload automático:
| parâmetro | ilustrar | |
|---|---|---|
| antes de carregar | O gancho antes de subir o arquivo, o parâmetro é o arquivo carregado, se retornar falso, o carregamento será interrompido. Ele suporta o retorno de um objeto Promise. Quando o objeto Promise rejeitar, o upload será interrompido e, quando for resolvido, começará o upload (se a resolução passar em um objeto File ou Blob, a resolução passará no objeto). Nota: IE9 não suporta este método. | (arquivo, lista de arquivos) =>boolean |Promise |
| lista de arquivos | Lista de arquivos enviados (controlados) | objeto[ ] |
Armazene o arquivo carregado pelo usuário em beforeLoad, que ainda não foi carregado:
// 上传前
const beforeUpload = (file: FileItem) => {
console.log(file, ' file ');
fileList.value = [file];
return false;
};
Quando o upload é clicado:
const loading = ref(false);
// 上传
const handleUpload = async () => {
if (!fileList.value.length) {
message.error('Please upload first');
return;
}
// 使用formData格式传递参数
const fd = new FormData();
fd.append('file', fileList.value[0]);
fd.append('pwd', pwd.value);
loading.value = true;
try {
// 发送请求
const res = await importCart(fd);
if (res.success) {
// success
} else {
// fail
} catch (err) {
console.log(err);
} finally {
loading.value = false;
}
};
Quando foi alterado de automático para manual antes, imitou o parâmetro content-type do antd e, após removê-lo, verificou-se que não surtiu efeito:
export const importCart = (params) =>
defHttp.post({
url: Api.api_import_cart,
params,
// 使用antd自动上传时的 response header
'Content-Type': 'application/octet-stream',
headers: {
ignoreCancelToken: true,
// 使用antd自动上传时的 request header
'Content-Type': 'multipart/form-data',
},
});
isso é tudo!