vue3.0下载图片到本地

在Vue3.0中，下载图片到本地通常通过File API配合axios或fetch等HTTP库来实现。以下是一个简单的步骤：

1. 首先，你需要一个响应式的数据源来存储图片URL，例如：

data() {
  return {
    imageUrl: 'https://example.com/image.jpg'
  };
}

2. 定义一个方法用于下载图片，比如`downloadImage`，你可以使用`URL.createObjectURL()`将图片转换为可以下载的链接，然后创建一个`a`标签触发下载：

methods: {
  downloadImage() {
    const url = this.imageUrl;
    const link = document.createElement('a');
    const blob = fetch(url).then(res => res.blob());
    
    if (blob) {
      link.href = URL.createObjectURL(blob);
      link.download = `image.jpg`; // 下载文件名
      link.click();
      // 等待下载完成后再移除临时URL
      setTimeout(() => URL.revokeObjectURL(link.href), 5000); // 这里的时间可以根据需要调整
      link.remove(); // 移除a标签
    }
  }
}

3. 调用这个方法，通常是当用户有下载需求时，比如点击某个按钮：

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