vue上传文件放在前端，并可以点击文件打开它该怎么写代码

首先，你需要在Vue组件中添加一个input元素，用于选择文件。可以使用以下代码：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileChange">
    <button @click="openFile">打开文件</button>
  </div>
</template>

接下来，在Vue组件的methods中，创建一个方法来处理文件选择和打开文件的操作。可以使用以下代码：

methods: {
  handleFileChange(event) {
    this.selectedFile = event.target.files[0];
  },
  openFile() {
    let fileURL = URL.createObjectURL(this.selectedFile);
    window.open(fileURL);
  }
}

在上面的代码中，我们将选择的文件存储在Vue组件的data中，然后使用URL.createObjectURL()方法创建一个URL，用于在新标签页中打开文件。

最后，记得在Vue组件的data中定义一个selectedFile变量，用于存储选择的文件。可以使用以下代码：

data() {
  return {
    selectedFile: null
  }
}

这样，当用户选择文件并点击“打开文件”按钮时，就会在新标签页中打开所选文件。