vue 上传图片和文件组件封装

Vue 上传图片和文件组件可以封装成一个通用组件，方便在多个地方使用。以下是一个简单的示例：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileChange">
    <button @click="upload">上传</button>
    <img :src="imageUrl" v-if="imageUrl">
    <a :href="fileUrl" v-if="fileUrl">{{ fileName }}</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      imageUrl: '',
      fileUrl: '',
      fileName: ''
    }
  },
  methods: {
    handleFileChange() {
      this.file = this.$refs.fileInput.files[0];
      this.imageUrl = URL.createObjectURL(this.file);
      this.fileName = this.file.name;
    },
    async upload() {
      const formData = new FormData();
      formData.append('file', this.file);
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData
      });
      const data = await response.json();
      this.fileUrl = data.fileUrl;
    }
  }
}
</script>

这个组件包含以下功能：

- 选择文件并预览图片；
- 上传文件并获取文件 URL；
- 显示已上传的文件 URL 和文件名。

你可以根据实际需求对组件进行扩展和定制。