vue获取下载文件接口中的文件名

在前端使用 Vue.js 调用下载文件接口时，可以在返回的响应头中获取文件名。具体方法如下：

1. 使用 axios 发送下载请求，并设置 `responseType` 为 `blob`：

axios({
    url: '/api/download',
    method: 'get',
    responseType: 'blob' // 设置响应类型为 blob
}).then(response => {
    // 下载成功后的处理
}).catch(error => {
    // 下载失败后的处理
});

2. 在响应中获取文件名：

const fileName = response.headers['content-disposition'].split(';')[1].split('filename=')[1];

其中，`response.headers['content-disposition']` 表示响应头中的 `Content-Disposition` 字段，它包含了文件名信息。通过拆分字符串，可以获取文件名部分并返回。

相关问题

vue调用下载文件接口

可以通过以下步骤实现在 Vue 中调用下载文件接口：

1. 定义一个下载文件的方法：

downloadFile() {
  // 发送下载请求
  axios({
    url: '/api/download', // 接口地址
    method: 'get',
    responseType: 'blob' // 表明返回服务器返回的数据类型
  }).then(response => {
    const blob = new Blob([response.data])
    const fileName = 'file.xlsx' // 文件名，从接口返回值获取
    const linkNode = document.createElement('a')
    linkNode.download = fileName // a 标签的 download 属性指定下载文件的文件名
    linkNode.style.display = 'none'
    linkNode.href = URL.createObjectURL(blob)
    document.body.appendChild(linkNode)
    linkNode.click()
    document.body.removeChild(linkNode) // 下载完成移除元素
  })
}

2. 在 Vue 组件中调用该方法：

<template>
  <button @click="downloadFile">下载文件</button>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    downloadFile() {
      // 上面定义的下载文件方法
      // ...
    }
  }
}
</script>

注意：这里使用了 axios 发送请求，需要安装 axios 并引入。

vue获取前端的文件名，删除服务器中的文件

要获取前端文件名，可以使用HTML5的File API，示例代码如下：

<input type="file" @change="handleFileUpload">

<script>
methods: {
  handleFileUpload(event) {
    const file = event.target.files[0];
    console.log(file.name); // 获取文件名
    // 进一步处理文件上传等操作
  }
}
</script>

要删除服务器中的文件，可以使用后端的接口进行处理。前端通过发送请求，传递文件名或文件ID给后端，后端根据传递的文件名或文件ID进行删除操作。具体实现方式取决于后端语言和框架，例如在Node.js中，可以使用fs模块进行文件操作。示例代码如下：

const fs = require('fs');

// 删除文件
fs.unlink('/path/to/file', (err) => {
  if (err) throw err;
  console.log('文件已删除');
});

在实际项目中，要注意安全性和权限控制，避免误删或非法删除文件。