vue怎么实现文档上传

2026-02-22 18:56:35VUE

文件上传的基本实现

在Vue中实现文件上传通常结合HTML的<input type="file">元素和FormData对象。通过@change事件监听文件选择，将文件数据通过Ajax发送到服务器。

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

<script>
export default {
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    submitFile() {
      const formData = new FormData();
      formData.append('file', this.file);

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

多文件上传支持

若需支持多文件上传，需在<input>标签添加multiple属性，并遍历files数组逐个添加至FormData。

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

handleMultiFileUpload(event) {
  this.files = event.target.files;
},
submitFiles() {
  const formData = new FormData();
  Array.from(this.files).forEach(file => {
    formData.append('files[]', file);
  });

  axios.post('/multi-upload', formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
  }).then(response => {
    console.log('多文件上传成功', response);
  });
}

文件预览与限制

在上传前可进行文件类型、大小的校验，并实现客户端预览功能。

handleFileUpload(event) {
  const file = event.target.files[0];
  if (file.size > 5 * 1024 * 1024) {
    alert('文件大小不能超过5MB');
    return;
  }
  if (!['image/jpeg', 'image/png'].includes(file.type)) {
    alert('仅支持JPEG/PNG格式');
    return;
  }

  // 图片预览
  const reader = new FileReader();
  reader.onload = (e) => {
    this.previewUrl = e.target.result;
  };
  reader.readAsDataURL(file);
  this.file = file;
}

进度条显示

通过Axios的onUploadProgress回调实现上传进度可视化。

vue怎么实现文档上传

axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  onUploadProgress: progressEvent => {
    const percent = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    this.uploadProgress = percent;
  }
})

第三方库集成

对于复杂需求（如拖拽上传、分片上传），可集成以下库：

vue-dropzone：提供拖拽上传界面
uppy：功能丰富的文件上传库
vue-upload-component：专为Vue定制的上传组件

安装示例：

vue怎么实现文档上传

npm install vue-upload-component

使用示例：

<template>
  <file-upload
    ref="upload"
    v-model="files"
    post-action="/upload"
    @input-file="onInputFile"
  ></file-upload>
</template>

<script>
import FileUpload from 'vue-upload-component';
export default {
  components: { FileUpload },
  methods: {
    onInputFile(newFile) {
      console.log('新增文件', newFile);
    }
  }
};
</script>

服务器端注意事项

确保服务器端正确处理multipart/form-data格式：

Node.js：使用multer中间件
PHP：通过$_FILES全局变量获取
Python Flask：使用request.files对象

Node.js示例：

const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  console.log(req.file);
  res.send('上传成功');
});