如何在 Vue.js 中处理图片的上传和下载？

wyl-1113 / 2024-12-14 / 原文

在 Vue.js 中处理图片的上传和下载是一个常见的需求，可以通过多种方式实现。下面分别介绍图片上传和下载的基本方法。

图片上传

1. 使用 HTML `<input type="file">` 元素

这是最基础的方法，通过文件输入框让用户选择要上传的图片文件。

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="uploadFile">上传图片</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    async uploadFile() {
      if (!this.file) {
        alert('请选择一个文件');
        return;
      }

      const formData = new FormData();
      formData.append('file', this.file);

      try {
        const response = await fetch('/api/upload', {
          method: 'POST',
          body: formData
        });

        if (response.ok) {
          const result = await response.json();
          console.log('上传成功:', result);
        } else {
          console.error('上传失败:', response.statusText);
        }
      } catch (error) {
        console.error('网络错误:', error);
      }
    }
  }
};
</script>

在这个例子中：

handleFileUpload 方法处理文件选择事件，将选中的文件保存到 file 数据属性中。
uploadFile 方法使用 fetch 发送 POST 请求，将文件上传到服务器。

2. 使用第三方库

对于更复杂的需求，可以使用一些第三方库，如 axios 来简化 HTTP 请求处理。

首先，安装 axios：

深色版本

npm install axios

然后在组件中使用：

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="uploadFile">上传图片</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    async uploadFile() {
      if (!this.file) {
        alert('请选择一个文件');
        return;
      }

      const formData = new FormData();
      formData.append('file', this.file);

      try {
        const response = await axios.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });

        console.log('上传成功:', response.data);
      } catch (error) {
        console.error('上传失败:', error);
      }
    }
  }
};
</script>

图片下载

1. 通过服务器提供的下载链接

如果服务器提供了一个下载链接，可以直接在浏览器中打开这个链接来下载图片。

<template>
  <div>
    <a :href="downloadUrl" download="image.jpg">下载图片</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      downloadUrl: '/api/download'
    };
  }
};
</script>

在这个例子中，<a> 标签的 href 属性绑定到 downloadUrl，用户点击链接后会下载图片。

2. 通过前端生成 Blob 并下载

如果需要从服务器获取图片数据并生成一个可下载的文件，可以使用 fetch 或 axios 获取图片数据，然后生成一个 Blob 对象。

<template>
  <div>
    <button @click="downloadImage">下载图片</button>
  </div>
</template>

<script>
export default {
  methods: {
    async downloadImage() {
      try {
        const response = await fetch('/api/download');
        const blob = await response.blob();

        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'image.jpg';
        a.click();
        window.URL.revokeObjectURL(url);
      } catch (error) {
        console.error('下载失败:', error);
      }
    }
  }
};
</script>

在这个例子中：