prefacio
Typhoon days at home revisa la realización de las funciones de carga y descarga de archivos.
Descargar Documento
Haga clic en un botón para descargar un archivo, un escenario comercial que ocurre con frecuencia.
Necesitamos configurar el tipo de respuesta en el encabezado de respuesta para decirle al backend el tipo de datos que necesitamos
export const getCartTemplate = () =>
defHttp.get({
url: Api.api_get_cart_template,
// 确保获取类型正确的数据
responseType: 'blob',
headers: {
ignoreCancelToken: true,
},
});
Después de obtener los datos, cree una etiqueta para clic 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 el objeto Blob:
Blob(blobParts[, options])
- blobParts : tipo de matriz, cada elemento de la matriz está conectado para formar los datos del objeto Blob, y cada elemento de la matriz puede ser ArrayBuffer (búfer de datos binarios), ArrayBufferView, Blob, DOMString. o una mezcla de otros objetos similares.
- options : Opcional, tipo de formato de diccionario, puede especificar los siguientes dos atributos:
type, el valor predeterminado es "", que representa el tipo MIME del contenido de la matriz que se colocará en el blob.
endings, el valor predeterminado es "transparente", que se usa para especificar cómo se escribe la cadena que contiene el terminador de línea \n. Es uno de los dos valores siguientes: "native", que indica que el carácter de final de línea se cambiará a un carácter de nueva línea adecuado para el sistema de archivos del sistema operativo host; "transparent", que indica que el carácter de final guardado en el blob será mantenido sin cambios.
tipo tipo referencia:
| Ext. | Tipo de Mimica |
|---|---|
| .doc | aplicación/msword |
| .punto | aplicación/msword |
| .docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
| .dotx | application/vnd.openxmlformats-officedocument.wordprocessingml.template |
| .docm | aplicación/vnd.ms-word.document.macroEnabled.12 |
| .dotm | aplicación/vnd.ms-word.template.macroEnabled.12 |
| .xls | aplicación/vnd.ms-excel |
| .xlt | aplicación/vnd.ms-excel |
| .xla | aplicación/vnd.ms-excel |
| .xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
| .xltx | application/vnd.openxmlformats-officedocument.spreadsheetml.template |
| .xlsm | aplicación/vnd.ms-excel.sheet.macroEnabled.12 |
| .xltm | aplicación/vnd.ms-excel.template.macroEnabled.12 |
| .xlam | aplicación/vnd.ms-excel.addin.macroEnabled.12 |
| .xlsb | aplicación/vnd.ms-excel.sheet.binary.macroEnabled.12 |
| .ppt | aplicación/vnd.ms-powerpoint |
| .maceta | aplicación/vnd.ms-powerpoint |
| .pps | aplicación/vnd.ms-powerpoint |
| .ppa | aplicación/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 | aplicación/vnd.ms-powerpoint.addin.macroEnabled.12 |
| .pptm | aplicación/vnd.ms-powerpoint.presentación.macroEnabled.12 |
| .potm | aplicación/vnd.ms-powerpoint.presentación.macroEnabled.12 |
| .ppsm | aplicación/vnd.ms-powerpoint.slideshow.macroEnabled.12 |
Carga de archivos (basado en ant-design-vue)
Cargue el archivo después de hacer clic en el botón, lleve la contraseña del archivo, ¡la contraseña puede estar vacía!
Sección de plantilla:
<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>
De hecho, es una carga manual. Hay un ejemplo en el documento antd: componente de carga ant-design-vue .
La descripción simple es que se deben agregar dos parámetros sobre la base de la carga automática:
| parámetro | ilustrar | |
|---|---|---|
| antesSubir | El gancho antes de cargar el archivo, el parámetro es el archivo cargado, si devuelve falso, la carga se detendrá. Admite la devolución de un objeto Promise. Cuando el objeto Promise se rechaza, la carga se detendrá y, cuando se resuelva, comenzará a cargarse (si la resolución pasa en un objeto File o Blob, entonces la resolución pasa en el objeto). Nota: IE9 no admite este método. | (archivo, lista de archivos) =>boolean |Promise |
| lista de archivos | Lista de archivos subidos (controlados) | objeto[ ] |
Guarde el archivo cargado por el usuario en beforeLoad, que aún no se ha cargado:
// 上传前
const beforeUpload = (file: FileItem) => {
console.log(file, ' file ');
fileList.value = [file];
return false;
};
Cuando se hace clic en cargar:
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;
}
};
Cuando se cambió de automático a manual antes, imitaba el parámetro de tipo de contenido de antd, y después de eliminarlo, se encontró que no tenía ningún efecto:
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',
},
});
¡eso es todo!