在Vue中，我們經常需要處理文件上傳和預覽等功能。這些操作通常需要使用Blob和URL.createObjectURL()方法來創建文件對象和路徑。

Blob是二進制數據的容器，包含了文件的內容、類型和其他元數據。而URL.createObjectURL()方法則將Blob對象轉化為一個唯一的URL，可以直接在瀏覽器中預覽。

const file = new Blob(['Hello World'], {type: 'text/plain'});
const url = URL.createObjectURL(file);
console.log(url); // "blob:http://localhost:8080/a7018d51-6a6c-46f9-ab23-16a2e5db92dc"

在Vue中，我們可以將創建Blob和生成URL的操作集成進組件內。比如下面的示例是一個簡單的文件上傳組件，用戶選中文件后，組件將會生成一個預覽URL，用于展示文件內容。

<template>
<div>
<input type="file" @change="handleFileSelect">
<div v-show="previewUrl">
<img v-if="isImage" :src="previewUrl">
<iframe v-else :src="previewUrl"></iframe>
</div>
</div>
</template>
<script>
export default {
data() {
return {
file: null,
previewUrl: null,
isImage: false
}
},
methods: {
handleFileSelect(e) {
this.file = e.target.files[0];
this.previewFile();
},
previewFile() {
const reader = new FileReader();
reader.onload = (event) =>{
const previewUrl = URL.createObjectURL(this.file);
this.previewUrl = previewUrl;
this.isImage = /^image\//.test(this.file.type);
}
reader.readAsDataURL(this.file);
}
}
}
</script>