vue下载文件以及文件重命名方式

下面是关于 Vue 下载文件以及文件重命名方式的完整攻略。

1. 下载文件

在 Vue 中下载文件，通常需要用到 AJAX 请求和 Blob 对象的相关 API。

首先，我们需要在 Vue 组件中定义下载方法：

methods: {
    downloadFile() {
        axios.get('http://example.com/downloads/example.pdf', {
            responseType: 'blob' // 重点
        })
        .then(response => {
            const url = window.URL.createObjectURL(new Blob([response.data]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'example.pdf'); // 自定义文件名
            document.body.appendChild(link);
            link.click();
        });
    }
}

在上面的代码中，我们使用 Axios 发起 AJAX 请求，并设置 responseType 为 blob，以便获取响应数据，并将其转化为 Blob 对象。接着，我们使用 URL.createObjectURL 将 Blob 对象转化为临时 URL，并创建一个 a 标签用于下载文件。其中，我们可以通过设置 a 标签的 download 属性，实现自定义文件名的功能。最后，将创建的 a 标签添加到 DOM 中，触发点击事件即可下载文件。

同时，我们还可以通过添加一个按钮，调用 downloadFile 方法来触发下载：

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

这样，当我们点击按钮时，将会触发 downloadFile 方法，实现文件的下载和保存。

2. 文件重命名

在 Vue 中，可以通过服务器端或前端的方式对文件进行重命名。下面，我们将分别介绍这两种方式的具体实现方法。

2.1 服务器端重命名

对于服务器端重命名，我们只需要在后端处理好文件重命名的逻辑，然后返回重命名后的文件路径即可。

例如，在 Node.js 中，我们可以使用 fs.renameSync 函数实现文件重命名：

const path = require('path');
const fs = require('fs');

const sourcePath = path.join(__dirname, 'example.pdf');
const targetPath = path.join(__dirname, 'example_renamed.pdf');

fs.renameSync(sourcePath, targetPath);

// 返回重命名后的文件路径
res.send({ path: targetPath });

在上面的代码中，我们将源文件 example.pdf 重命名为 example_renamed.pdf，并将重命名后的文件路径返回给客户端，以更新下载链接。

2.2 客户端重命名

对于前端重命名，我们可以使用 File API 的相关函数，来实现文件的重命名操作。具体实现方法如下：

<template>
  <div>
    <div>
      <input type="file" ref="fileInput" @change="handleFileChange" />
    </div>
    <div>
      <button @click="renameFile">重命名文件</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      fileName: ''
    }
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
      this.fileName = this.file.name;
    },
    renameFile() {
      const newFile = new File([this.file], this.fileName, { type: this.file.type });
      console.log(newFile); // 打印重命名后的文件信息
    }
  }
}
</script>

在上面的代码中，我们定义了一个 input[type="file"] 来选择文件，并在 handleFileChange 方法中获取选择的文件。接着，我们将文件信息保存在 data 属性中，以便在重命名时使用。

最后，在 renameFile 方法中，我们使用 File API 的 File 构造函数，创建一个新的文件对象，同时传递原文件对象、新文件名以及文件类型等参数即可。

以上便是 Vue 下载文件以及文件重命名的完整攻略。在实际开发的过程中，可以根据具体需求灵活运用这些技巧。