上传下载图片的

上传图片

1.上传图片的方法一般是用Upload组件直接上传File的信息

2.通过FormData对象上传

FormData对象是一个JavaScript对象，可以用来存储表单数据
headers:{“Content-type”:“multipart/form-data”}

3.通过Form表单上传

在HTML中创建一个表单，包含一个文件输入字段，用户可以选择一个或多个文件进行上传。这是最常见的一种方式。

// 获取表单元素
const form = document.getElementById('myForm');// 创建FormData对象
const formData = new FormData(form);// 发送POST请求
fetch('/submit', {method: 'POST',body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

下载的

点击直接在当前页面下载，用a标签实现的
** 具体的思路**

<a href="文件地址" download="文件名">点击下载</a>

将文件地址替换为要下载的文件的URL，将文件名替换为要保存的文件名。用户点击“点击下载”链接时，浏览器会开始下载指定的文件。

注意：当图片的源（ip和端口）与当前页面不同时，即使添加了download属性，也无法进行下载

exportFile(i tenplaterd: item.id 3). then((res)=>{const blob = new Blob([res], { type: 'application/octet-str'});const url = window. URL. createobjectURL (blob) ;const link = document. createElement ('a');link.style.display = 'none';link.href = url;link.setAttribute('download', item.templateName + '.json');document .body.appendChild (link);link.click();document .body.removeChild(1ink);// 下载完成移除元素window. URL.revokeobjectURL (ur1);// 释放掉Blob对象},

方法二：
文件：utils/util.js

export async function blobValidate(data) {try {const text = await data.text();JSON.parse(text);return false;} catch (error) {return true;}
}

import { blobValidate} from "@/utils/util";
//vue
axios({method: 'get',url: `/api/countryBusiness/range/download-template/${mannuId}`,// url: `/api/countryBusiness/range/download-template/115`,responseType: 'blob',headers: { 'Authorization': 'Bearer ' + getToken() },}).then(async (res) => {//  const blob = new Blob([res.data])console.log('1===',res.data,typeof res.data);const isLogin = await blobValidate(res.data);if (isLogin) {const blob = new Blob([res.data])saveAs(blob, decodeURI(res.headers['content-disposition'].replace('attachment;filename=', '')))} else {// this.printErrMsg(res.data);}})

注意：若是下载excel文件，必须要传responseType: ‘blob’,否则可能会出现下载的文件打不开，显示文件有问题，不能正常打开。

下载excel打不开的原因如下：

在前端发起 HTTP 请求下载文件时，responseType 选项指定了请求响应的数据类型。当你设置 responseType 为 'blob'，你告诉浏览器你期望的响应是一个二进制的 Blob 对象。Blob 对象是一种不可变的、原始数据的集合，可以是文本或二进制数据。

如果你在下载 Excel 文件时没有指定 responseType 为 'blob'，可能会出现以下情况：

默认的响应类型：如果未指定 responseType，浏览器可能会默认将其设置为 'text'。这意味着即使服务器返回的是二进制数据，浏览器也会尝试将其解析为文本。对于 Excel 文件（通常是 .xlsx 格式，基于 XML），这会导致文件内容无法正确解析，因此无法打开。
文件内容损坏：如果浏览器尝试将二进制数据解析为文本，可能会破坏文件的二进制结构，导致文件无法正常打开。
编码问题：某些服务器配置可能会对响应内容应用编码（如 gzip），如果没有正确处理这些编码，即使文件被下载，也可能因为编码问题而无法正确打开。

使用 'blob' 作为 responseType 可以确保浏览器以正确的方式接收和处理文件数据，保持文件的原始二进制格式，从而允许文件被正确地下载和打开。

以下是一个使用 Axios 库下载文件并指定 responseType 为 'blob' 的示例：

axios({url: '/path/to/your/excel.xlsx',method: 'GET',responseType: 'blob', // 指定响应类型为 Blobheaders: {'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // 指定接受的 MIME 类型}
}).then(function (response) {// 创建一个 Blob 对象，并设置文件类型const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });// 创建一个指向该 Blob 的 URLconst url = window.URL.createObjectURL(blob);// 创建一个临时的链接用于下载const link = document.createElement('a');link.href = url;link.download = 'your-filename.xlsx';document.body.appendChild(link);link.click();// 清理并移除链接document.body.removeChild(link);window.URL.revokeObjectURL(url); // 释放 URL 对象
}).catch(function (error) {console.error('File download failed:', error);
});