vue实现文件上传前后

2026-02-23 09:56:26VUE

前端实现文件上传

在Vue中实现文件上传，通常需要结合HTML的<input type="file">元素和FormData对象。以下是一个基本实现示例：

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

<script>
export default {
  data() {
    return {
      selectedFile: null
    }
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0]
    },
    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'
          }
        })
        console.log('上传成功:', response.data)
      } catch (error) {
        console.error('上传失败:', error)
      }
    }
  }
}
</script>

后端接收文件处理

后端处理文件上传的方式取决于使用的服务器框架。以下是几种常见后端的实现方法：

Node.js (Express)

vue实现文件上传前后

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

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

Python (Flask)

from flask import Flask, request

app = Flask(__name__)

@app.route('/api/upload', methods=['POST'])
def upload_file():
    file = request.files['file']
    if file:
        file.save(f'uploads/{file.filename}')
        return {'message': '文件上传成功'}
    return {'error': '没有接收到文件'}, 400

Java (Spring Boot)

vue实现文件上传前后

@RestController
@RequestMapping("/api")
public class FileUploadController {

    @PostMapping("/upload")
    public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {
        try {
            file.transferTo(new File("uploads/" + file.getOriginalFilename()));
            return ResponseEntity.ok("文件上传成功");
        } catch (Exception e) {
            return ResponseEntity.status(500).body("上传失败");
        }
    }
}

文件上传进度显示

在Vue中可以显示上传进度，增强用户体验：

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="uploadFile">上传文件</button>
    <progress :value="progress" max="100"></progress>
    <span>{{ progress }}%</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null,
      progress: 0
    }
  },
  methods: {
    async uploadFile() {
      const config = {
        headers: { 'Content-Type': 'multipart/form-data' },
        onUploadProgress: progressEvent => {
          this.progress = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          )
        }
      }

      await axios.post('/api/upload', formData, config)
    }
  }
}
</script>

文件类型和大小验证

前端验证可以防止无效文件被上传：

methods: {
  handleFileChange(event) {
    const file = event.target.files[0]
    const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf']
    const maxSize = 5 * 1024 * 1024 // 5MB

    if (!allowedTypes.includes(file.type)) {
      alert('不支持的文件类型')
      return
    }

    if (file.size > maxSize) {
      alert('文件大小超过限制')
      return
    }

    this.selectedFile = file
  }
}

多文件上传实现

支持同时上传多个文件：

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

<script>
methods: {
  handleFilesChange(event) {
    this.selectedFiles = Array.from(event.target.files)
  },
  async uploadFiles() {
    const formData = new FormData()
    this.selectedFiles.forEach(file => {
      formData.append('files', file)
    })

    await axios.post('/api/upload-multiple', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    })
  }
}
</script>