js blob链接在页面刷新后失效

当页面刷新时，浏览器会重新加载所有的资源，包括 JavaScript、CSS、HTML、图像和其他文件。因此，之前通过 JavaScript 创建的 Blob 对象和 URL 对象也会被清除。

要避免这种情况，可以使用 Web Storage API 或者 IndexedDB 来保存 Blob 对象和 URL 对象的引用。这样，即使页面刷新，这些对象仍然可以被访问。

另外，可以考虑使用服务器端的存储来保存 Blob 对象和 URL 对象，这样就可以在页面刷新后重新加载它们。这种方法需要在服务器端进行实现，并且需要注意安全问题和数据保护。

相关问题

elementui上传图片得到的blob:http格式链接可以正常打开，但页面刷新后显示未找到文件，请解释其原因并给出解决该问题的代码

### 回答1：

答：这可能是由于图片缓存的问题，可以通过设置HTTP头信息的Cache-Control属性来解决。可以使用以下代码：res.setHeader('Cache-Control','no-cache'); 或者 res.setHeader('Cache-Control','max-age=0');

### 回答2：
当我们将图片上传到服务器后，服务器会返回一个包含图片信息的链接（blob:http格式），这个链接实际上是一个临时的URL，它是存在于内存中的。当页面进行刷新后，页面重新加载，之前的临时链接就会失效，由于链接已经不存在，所以会显示未找到文件的错误。

解决这个问题的方法是将图片信息保存到服务器端，之后可以通过服务器返回的链接来获取图片。以下是解决该问题的代码示例：

1.前端代码：

<template>
  <input type="file" @change="uploadImage" />
</template>

<script>
export default {
  methods: {
    async uploadImage(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append("image", file);

      try {
        const response = await axios.post("/api/upload", formData);  //将图片上传到服务器
        const imageUrl = response.data.imageUrl;
        // 保存服务器返回的图片链接到数据库或在页面中使用
        // 然后在页面中通过保存的链接来获取图片
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

2.后端代码（使用Node.js和Express示例）：

const express = require("express");
const multer = require("multer");
const app = express();
const upload = multer({ dest: "uploads/" });

app.post("/api/upload", upload.single("image"), (req, res) => {
  // 处理上传的图片，保存到服务器的存储路径
  const imageUrl = "/uploads/" + req.file.filename;
  // 返回图片链接给前端
  res.json({ imageUrl: imageUrl });
});

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

在上述代码中，我们使用了axios库来发送POST请求上传图片到服务器。后端使用multer中间件处理文件上传，并将图片存储到指定目录。在成功上传后，后端会返回一个图片链接给前端，前端可以将该链接保存到数据库或在页面中使用。

通过将图片信息保存到服务器并使用服务器返回的链接来获取图片，就可以避免页面刷新后链接失效的问题。

### 回答3：
elementui上传图片得到的blob:http格式链接是一个临时的链接，在页面刷新后会无法找到该文件的原因是因为页面刷新会重新加载页面，临时链接就会失效。

要解决这个问题，可以通过以下方式：

1. 将上传的图片保存到服务器，并返回一个永久的图片链接。这样即使页面刷新，也能通过永久链接找到图片。可以使用后端语言（如PHP、Node.js等）来实现图片的上传和保存功能。

2. 将上传的图片转化为base64格式的字符串，然后将其存储在浏览器的本地存储（如localStorage）中。这样即使页面刷新，也可以从本地存储中读取图片的base64字符串，并通过JavaScript动态显示图片。以下是一个示例代码：

// 上传图片后的回调函数
handleUploadSuccess(response, file) {
  // 从response中获取图片的blob:http链接
  const blobUrl = response.data.url;
  
  // 将blob:http链接转化为base64格式的字符串
  this.getBase64FromUrl(blobUrl, (base64Url) => {
    // 将base64字符串存储在浏览器的本地存储中
    localStorage.setItem('uploadedImage', base64Url);
  });
},

// 从blob:http链接获取base64格式的字符串
getBase64FromUrl(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';

  xhr.onload = function() {
    if (xhr.status === 200) {
      const reader = new FileReader();
      reader.onloadend = function() {
        callback(reader.result);
      }
      reader.readAsDataURL(xhr.response);
    }
  };

  xhr.send();
},

// 页面加载时，获取本地存储中的图片base64字符串并显示
mounted() {
  const base64Url = localStorage.getItem('uploadedImage');
  if (base64Url) {
    this.imageUrl = base64Url;
  }
},

通过以上代码，将上传的图片转化为base64字符串，并存储在浏览器的本地存储中。在页面加载时，从本地存储中获取图片base64字符串并显示在页面中，即可解决页面刷新后无法找到文件的问题。

使用 URL.createObjectURL(blob) 来创建一个 URL，然后将这个 URL 赋值给元素的 src 属性展示图像，或者发送给服务器进行处理。

当你有一个 `Blob` 对象，`URL.createObjectURL(blob)` 方法可以将其转换为一个临时的、安全的 URL，这个 URL 可以直接指向存储在浏览器缓存中的数据。这种方式特别适合于在不涉及跨域的情况下，动态地加载或分享数据，比如图片、音频、视频等。

例如，如果你想在一个 `<img>` 标签中显示 Blob 中的图片，你可以这样做：

const blob = ...; // 假设已经得到了一个 Blob 对象
const url = URL.createObjectURL(blob);
const imgElement = document.createElement('img');
imgElement.src = url;
document.body.appendChild(imgElement);

在这个例子中，`imgElement.src` 被设置为由 `createObjectURL` 生成的 URL，当页面刷新或关闭时，该 URL 将自动失效，释放对应资源。

如果你想要发送 Blob 到服务器，例如通过 `fetch` 或 `XMLHttpRequest`，你可以构造一个 POST 请求，附上创建的 URL 作为数据部分：

fetch('/api/upload', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/octet-stream'
  },
  body: url // 传递 URL 替代原始 Blob 数据
}).then(response => response.json());

但是注意，发送的 URL 并不是 Blob 数据本身，而是指向它的引用，所以服务器需要能处理这种形式的数据请求，并且通常需要特殊配置。