vue实现文件上传显示

2026-02-23 08:20:41VUE

实现文件上传与显示的基本步骤

使用Vue实现文件上传并显示可以通过以下方法完成，结合<input type="file">和文件预览逻辑。

HTML模板部分

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept="image/*" />
    <button @click="uploadFile">上传</button>
    <div v-if="previewUrl">
      <img :src="previewUrl" alt="预览" style="max-width: 200px;" />
    </div>
  </div>
</template>

JavaScript逻辑部分

<script>
export default {
  data() {
    return {
      selectedFile: null,
      previewUrl: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
      // 生成预览URL
      if (this.selectedFile) {
        this.previewUrl = URL.createObjectURL(this.selectedFile);
      }
    },
    uploadFile() {
      if (!this.selectedFile) return;
      const formData = new FormData();
      formData.append('file', this.selectedFile);
      // 示例：使用axios上传
      axios.post('/api/upload', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      }).then(response => {
        console.log('上传成功', response);
      }).catch(error => {
        console.error('上传失败', error);
      });
    }
  }
};
</script>

关键点说明

文件选择监听
通过@change事件捕获用户选择的文件，event.target.files[0]获取第一个文件对象。
本地预览
使用URL.createObjectURL()生成临时URL，用于前端预览。注意在组件销毁时调用URL.revokeObjectURL()释放内存（可在beforeUnmount生命周期中处理）。
文件上传
通过FormData对象包装文件，使用HTTP库（如axios）发送到后端。设置请求头'Content-Type': 'multipart/form-data'确保正确传输文件。

显示服务器返回的文件

若需显示已上传的文件（如从服务器获取）：

data() {
  return {
    serverFileUrl: null
  };
},
mounted() {
  axios.get('/api/get-file').then(response => {
    this.serverFileUrl = response.data.url;
  });
}

模板中直接绑定serverFileUrl即可：

<img v-if="serverFileUrl" :src="serverFileUrl" alt="服务器文件" />

优化与扩展

多文件上传
修改<input>的multiple属性，遍历event.target.files处理多个文件。
文件类型限制
通过accept属性限制文件类型（如accept=".jpg,.png"），或在handleFileUpload中校验file.type。

进度显示
axios的onUploadProgress回调可实现上传进度条：

vue实现文件上传显示

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