vue实现文件的上传

使用 Vue 实现文件上传

Vue 可以通过原生 HTML 的 <input type="file"> 或第三方库（如 axios、vue-upload-component）实现文件上传功能。以下是几种常见方法：

原生 HTML 文件上传

通过 <input type="file"> 结合 Vue 的数据绑定实现基础文件上传。

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

<script>
export default {
  data() {
    return {
      file: null,
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      if (!this.file) return;

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

      // 使用 fetch 或 axios 发送请求
      fetch('/api/upload', {
        method: 'POST',
        body: formData,
      })
        .then(response => response.json())
        .then(data => console.log('上传成功:', data))
        .catch(error => console.error('上传失败:', error));
    },
  },
};
</script>

使用 Axios 实现文件上传

Axios 是流行的 HTTP 客户端，适合处理文件上传的异步请求。

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

<script>
import axios from 'axios';

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

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

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

使用第三方库 vue-upload-component

vue-upload-component 是专为 Vue 设计的文件上传组件，支持多文件上传、进度条等功能。

安装依赖：

npm install vue-upload-component

示例代码：

<template>
  <div>
    <file-upload
      ref="upload"
      :post-action="'/api/upload'"
      @input-file="onFileChange"
    ></file-upload>
    <button @click="startUpload">开始上传</button>
  </div>
</template>

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

export default {
  components: {
    FileUpload,
  },
  methods: {
    onFileChange(file) {
      console.log('文件已选择:', file);
    },
    startUpload() {
      this.$refs.upload.active = true;
    },
  },
};
</script>

文件上传的常见需求处理

限制文件类型 通过 accept 属性限制上传文件类型：

<input type="file" accept=".jpg,.png,.pdf" @change="handleFileUpload" />

显示上传进度 使用 Axios 的 onUploadProgress 实现进度显示：

axios.post('/api/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  onUploadProgress: progressEvent => {
    const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`上传进度: ${percent}%`);
  },
});

多文件上传 通过 multiple 属性支持多文件选择：

<input type="file" multiple @change="handleFileUpload" />

后端接口注意事项

• 确保后端接口支持 multipart/form-data 格式。
• 处理跨域问题（如配置 CORS）。
• 文件大小限制需在后端校验。

通过以上方法，可以灵活实现 Vue 中的文件上传功能。