vue 实现 fileinput

Vue 实现 FileInput

在 Vue 中实现文件输入（FileInput）可以通过多种方式完成，以下是几种常见的方法：

使用原生 HTML input 元素

最简单的方法是使用原生 HTML 的 <input type="file"> 元素，并通过 Vue 的事件绑定来处理文件选择。

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

<script>
export default {
  methods: {
    handleFileChange(event) {
      const files = event.target.files;
      if (files.length > 0) {
        console.log('Selected file:', files[0]);
      }
    }
  }
};
</script>

使用 Vue 组件封装

可以创建一个可复用的 Vue 组件来封装文件输入功能，提供更好的可定制性和样式控制。

<template>
  <div class="file-input">
    <label>
      {{ label }}
      <input type="file" @change="handleFileChange" :accept="accept" style="display: none;" />
    </label>
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: '选择文件'
    },
    accept: {
      type: String,
      default: '*'
    }
  },
  methods: {
    handleFileChange(event) {
      const files = event.target.files;
      if (files.length > 0) {
        this.$emit('file-selected', files[0]);
      }
    }
  }
};
</script>

<style scoped>
.file-input {
  padding: 10px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  cursor: pointer;
}
</style>

使用第三方库

如果需要更复杂的功能（如拖放上传、多文件上传等），可以使用第三方库如 vue-upload-component 或 dropzone。

安装 vue-upload-component：

npm install vue-upload-component

使用示例：

<template>
  <div>
    <file-upload
      ref="upload"
      v-model="files"
      post-action="/upload"
      @input-filter="inputFilter"
    >
      上传文件
    </file-upload>
  </div>
</template>

<script>
import FileUpload from 'vue-upload-component';

export default {
  components: {
    FileUpload
  },
  data() {
    return {
      files: []
    };
  },
  methods: {
    inputFilter(newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        if (newFile.size > 1024 * 1024 * 10) {
          return prevent();
        }
      }
    }
  }
};
</script>

处理文件上传

选择文件后，通常需要将文件上传到服务器。可以使用 axios 或其他 HTTP 客户端库。

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="uploadFile">上传</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selectedFile: null
    };
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
    },
    uploadFile() {
      if (!this.selectedFile) return;

      const formData = new FormData();
      formData.append('file', this.selectedFile);

      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('上传成功:', response.data);
      }).catch(error => {
        console.error('上传失败:', error);
      });
    }
  }
};
</script>

通过以上方法，可以在 Vue 中灵活地实现文件输入功能，并根据需求选择适合的方式。