vue实现文档上传

2026-01-11 21:56:02VUE

Vue 实现文档上传的方法

使用原生 HTML 表单和 Vue 处理文件上传

在 Vue 中可以通过原生 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) {
        alert('请选择文件');
        return;
      }
      const formData = new FormData();
      formData.append('file', this.file);
      // 使用 axios 或其他 HTTP 库发送请求
      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 或 element-ui 的 el-upload 组件简化文件上传的实现。

使用 element-ui 的 el-upload 组件：

<template>
  <div>
    <el-upload
      action="/api/upload"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="beforeUpload"
    >
      <el-button type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      const isAllowed = file.type === 'application/pdf';
      if (!isAllowed) {
        this.$message.error('只能上传 PDF 文件');
      }
      return isAllowed;
    },
    handleSuccess(response, file) {
      this.$message.success('上传成功');
      console.log('文件上传成功', response);
    },
    handleError(error, file) {
      this.$message.error('上传失败');
      console.error('文件上传失败', error);
    },
  },
};
</script>

实现拖拽上传

可以通过监听拖拽事件实现拖拽上传功能。

<template>
  <div
    @dragover.prevent="dragover"
    @dragleave.prevent="dragleave"
    @drop.prevent="drop"
    :class="{ 'drag-active': isDragActive }"
  >
    <p>拖拽文件到此处上传</p>
    <input type="file" @change="handleFileUpload" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragActive: false,
      file: null,
    };
  },
  methods: {
    dragover() {
      this.isDragActive = true;
    },
    dragleave() {
      this.isDragActive = false;
    },
    drop(event) {
      this.isDragActive = false;
      this.file = event.dataTransfer.files[0];
      this.uploadFile();
    },
    handleFileUpload(event) {
      this.file = event.target.files[0];
      this.uploadFile();
    },
    uploadFile() {
      if (!this.file) {
        alert('请选择文件');
        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>

<style>
.drag-active {
  border: 2px dashed #409eff;
  background-color: #f5f7fa;
}
</style>

文件上传的验证和限制

可以在上传前对文件进行验证，例如限制文件类型、大小等。

methods: {
  beforeUpload(file) {
    const allowedTypes = ['application/pdf', 'image/jpeg', 'image/png'];
    const isAllowedType = allowedTypes.includes(file.type);
    const isWithinSize = file.size <= 2 * 1024 * 1024; // 2MB

    if (!isAllowedType) {
      this.$message.error('只能上传 PDF、JPEG 或 PNG 文件');
      return false;
    }
    if (!isWithinSize) {
      this.$message.error('文件大小不能超过 2MB');
      return false;
    }
    return true;
  },
},

多文件上传

可以通过设置 <input type="file" multiple> 或使用第三方库实现多文件上传。

<template>
  <div>
    <input type="file" multiple @change="handleFileUpload" />
    <button @click="uploadFiles">上传文件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [],
    };
  },
  methods: {
    handleFileUpload(event) {
      this.files = Array.from(event.target.files);
    },
    uploadFiles() {
      if (this.files.length === 0) {
        alert('请选择文件');
        return;
      }
      const formData = new FormData();
      this.files.forEach(file => {
        formData.append('files[]', file);
      });
      axios.post('/api/upload-multiple', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
      .then(response => {
        console.log('上传成功', response.data);
      })
      .catch(error => {
        console.error('上传失败', error);
      });
    },
  },
};
</script>

上传进度显示

可以通过监听上传进度事件显示上传进度。

methods: {
  uploadFile() {
    const formData = new FormData();
    formData.append('file', this.file);
    axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      onUploadProgress: progressEvent => {
        const percentCompleted = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );
        console.log(`上传进度: ${percentCompleted}%`);
      },
    })
    .then(response => {
      console.log('上传成功', response.data);
    })
    .catch(error => {
      console.error('上传失败', error);
    });
  },
},

通过以上方法，可以在 Vue 中实现文档上传功能，并根据需求选择适合的实现方式。

vue实现文档上传