当前位置：首页 > VUE

vue实现文件上传显示

2026-01-22 17:32:40VUE

vue实现文件上传显示

在Vue中实现文件上传并显示可以通过以下步骤完成：

HTML部分

vue实现文件上传显示

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="uploadFile">上传文件</button>
    <div v-if="fileUrl">
      <img v-if="isImage" :src="fileUrl" alt="上传的图片" style="max-width: 300px; max-height: 300px;" />
      <a v-else :href="fileUrl" download>下载文件</a>
    </div>
  </div>
</template>

JavaScript部分

<script>
export default {
  data() {
    return {
      selectedFile: null,
      fileUrl: null,
      isImage: false
    }
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0]
      if (this.selectedFile) {
        const fileType = this.selectedFile.type
        this.isImage = fileType.startsWith('image/')

        // 本地预览
        if (this.isImage) {
          const reader = new FileReader()
          reader.onload = (e) => {
            this.fileUrl = e.target.result
          }
          reader.readAsDataURL(this.selectedFile)
        }
      }
    },
    async uploadFile() {
      if (!this.selectedFile) return

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

      try {
        const response = await axios.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })

        // 服务器返回的文件URL
        this.fileUrl = response.data.url
        alert('上传成功')
      } catch (error) {
        console.error('上传失败:', error)
        alert('上传失败')
      }
    }
  }
}
</script>

后端处理 后端需要设置一个接收文件上传的接口，以Node.js Express为例：

vue实现文件上传显示

const express = require('express')
const multer = require('multer')
const path = require('path')

const app = express()
const upload = multer({ dest: 'uploads/' })

app.post('/api/upload', upload.single('file'), (req, res) => {
  // 处理文件保存逻辑
  const fileUrl = `/uploads/${req.file.filename}`
  res.json({ url: fileUrl })
})

app.listen(3000, () => console.log('Server running on port 3000'))

样式优化

<style scoped>
input[type="file"] {
  margin: 10px 0;
}
button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #3aa876;
}
</style>

注意事项