vue 实现上传文件 并且可以预览

实现上传文件并且可以预览，可以采用以下步骤：

1. 在模板中添加一个文件上传的 input 标签，并设置 multiple 和 ref 属性：

<template>
  <div>
    <input type="file" ref="fileInput" multiple @change="handleFileChange">
  </div>
</template>

2. 在 Vue 实例中添加 handleFileChange 方法，该方法用于获取上传的文件列表，并且将文件列表存储到 data 中：

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleFileChange() {
      this.fileList = Array.from(this.$refs.fileInput.files)
    }
  }
}
</script>

3. 在模板中添加一个文件预览的区域，并使用 v-for 指令遍历 fileList 数组，通过 URL.createObjectURL() 方法获取文件的预览地址：

<template>
  <div>
    <input type="file" ref="fileInput" multiple @change="handleFileChange">
    <div>
      <div v-for="(file, index) in fileList" :key="index">
        <img :src="URL.createObjectURL(file)">
      </div>
    </div>
  </div>
</template>

这样就可以实现文件上传并且可以预览了。需要注意的是，在实际开发中，还需要对上传的文件进行大小和类型的限制，以及添加上传进度条等功能。