上传下载图片的

上传图片

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'，可能会出现以下情况：

1. 默认的响应类型：如果未指定 responseType，浏览器可能会默认将其设置为 'text'。这意味着即使服务器返回的是二进制数据，浏览器也会尝试将其解析为文本。对于 Excel 文件（通常是 .xlsx 格式，基于 XML），这会导致文件内容无法正确解析，因此无法打开。

2. 文件内容损坏：如果浏览器尝试将二进制数据解析为文本，可能会破坏文件的二进制结构，导致文件无法正常打开。

3. 编码问题：某些服务器配置可能会对响应内容应用编码（如 gzip），如果没有正确处理这些编码，即使文件被下载，也可能因为编码问题而无法正确打开。

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

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

axios({
  url: '/path/to/your/excel.xlsx',
  method: 'GET',
  responseType: 'blob', // 指定响应类型为 Blob
  headers: {
    '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 的 URL
  const 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);
});

在这个示例中，我们通过设置 responseType: 'blob' 来确保响应数据以 Blob 形式接收，然后创建一个指向该 Blob 的 URL，并使用一个临时的 <a> 标签来触发文件下载。这样，下载的 Excel 文件就可以正常打开了。