文件上传下载以及接口类型_文件类型免费接口-优快云博客

本文链接：https://blog.youkuaiyun.com/chuanjongkoujin/article/details/145769027

文件上传formData进行文件上传,

headers: {
      'Content-Type': 'multipart/form-data', // 关键
 }

<el-upload :http-request="importModelListFn" :show-file-list="false" style="display: inline-block;">
     <el-button type="primary" icon="Upload" class="move-btn">导入模板</el-button>
</el-upload>


// 模板导入
const importModelListFn = (options: any) => {
  let file = options.file
  let formData = new FormData()
  formData.append('file', file)//携带文件
  formData.append('name', file.name)//携带其他参数
  formData.append('treeId', currentNode.value.id)//携带其他参数
  formData.append('type', treeType.value)//携带其他参数
  //上传接口
  importModelreportListApi(formData).then(res => {
    if (res.data.code == 0) {
      getRightTable()
    }
  })
}

前端接收文件，接口处加上类型限定。

  responseType:'blob'

接收文件并下载

const importTableModel = (row: any) => {
  importTableModelreportAPi({ id: row.id }).then(res => {
    let url = window.URL.createObjectURL(new Blob([res.data]))
    const a = document.createElement('a');
    a.href = url;
    a.download = row.name.split('.')[0] + '.docx';
    a.click();
    URL.revokeObjectURL(url);
  })
}

window.URL.createObjectURL是 JavaScript 中的一个方法，可以将一个本地文件或者一个 Blob 对象转换成一个可供网页使用的 URL。这个方法可以用来显示本地文件或者 Blob 对象，例如图片或者音频。使用时需要传入一个本地文件或者 Blob 对象作为参数。使用完 URL 对象后，应该调用 window.URL.revokeObjectURL 函数来释放资源。

responseType的几种类型：

""	默认值，响应将作为字符串返回
"arraybuffer"	响应将作为ArrrayBiffer对象返回，适用于处理二进制数据，如图片，音频等。
"blob"	响应将作为blob对象返回，用于处理二进制大对象
"document"	响应将作为Document对象返回，通常用于处理XML数据
"json"	响应将作为解析后的JSON对象返回
"text"	响应将作为字符串返回

contentType的几种类型：

文本类型

text/plain	表示纯文本数据，不包含任何格式化信息。
	应用场景：常用于传输简单的文本内容，如日志文件、配置文件等。
text/html	表示超文本标记语言（HTML）文档。
	应用场景：在网页开发中，服务器返回给浏览器的 HTML 页面通常使用此类型。
text/css	表示层叠样式表（CSS）文件。
	应用场景：用于传输网页的样式信息。
text/javascript	表示 JavaScript 脚本文件。
	应用场景：用于传输网页中使用的 JavaScript 代码。

图像类型

image/jpeg	表示 JPEG 格式的图像文件
	应用场景：是互联网上最常用的图像格式之一，适用于照片等色彩丰富的图像。
image/png	表示 PNG 格式的图像文件。
	应用场景：支持透明背景，常用于图标、logo 等需要透明效果的图像。
image/gif	表示 GIF 格式的图像文件，支持动画效果。
	应用场景：常用于制作简单的动画、表情包等。

音频和视频类型

audio/mpeg	表示 MPEG 格式的音频文件，如 MP3。
	应用场景：是互联网上最常用的音频格式之一。
video/mp4	表示 MP4 格式的视频文件。
	应用场景：是互联网上最常用的视频格式之一，具有广泛的兼容性。

表单数据类型

application/x-www-form-urlencoded	是表单数据的默认编码方式，将表单数据编码为键值对，并用 & 符号分隔。
	应用场景：常用于简单的表单提交，如登录表单、搜索表单等。
multipart/form-data	用于上传文件的表单编码方式，允许在表单中包含二进制数据。
	应用场景：当表单中需要上传文件时，必须使用此类型。

JSON 和 XML 类型

application/json	表示 JSON 格式的数据。
	应用场景：在前后端数据交互中广泛使用，用于传输结构化的数据。
application/xml	表示 XML 格式的数据。
	应用场景：在一些传统的 Web 服务和数据交换中仍然使用。