vue中实现上传文件给后台实例详解

针对“vue中实现上传文件给后台的实例详解”，我的回答将分为以下几个部分说明：

概述
前端实现步骤
后端实现步骤
示例说明1
示例说明2

1. 概述

Vue是一种现代化的JavaScript框架，它能够帮助我们快速构建交互式界面。在许多Web应用程序中，我们需要允许用户上传文件到我们的服务器。尽管Vue本身并不提供文件上传功能，但通过结合一些其他的JavaScript库（例如Axios和FormData），我们可以很容易地实现这个功能。

在本教程中，我们将使用Vue及上述库来实现文件上传功能的完整步骤。具体而言，我们将首先在Vue组件中创建一个文件上传表单，并编写JavaScript代码以便在选择文件时将该文件上传到我们的服务器。接着，我们将实现服务器接收上传文件的后端服务。

2. 前端实现步骤

第一步：建立Vue组件

首先，我们需要建立一个Vue组件用于包含我们的文件上传表单。具体方法为通过在 Vue 的模板中添加一个元素来创建文件上传界面:

<template>
  <div>
    <form>
      <input type="file" name="upload">
      <button type="submit">upload</button>
    </form>
  </div>
</template>

上述代码中，我们使用了 <input> 标签来创建上传文件的表单。这个表单将提示用户选择一个文件和上传该文件到服务器。

第二步：使用Axios上传文件

接下来，我们使用axios库对上传文件进行处理。Axios是一个JavaScript库，它可以轻松地与服务器进行HTTP请求和响应交互。我们将利用Axios库的API来简化上传文件的过程。

首先，在Vue组件脚本中，我们需要引入Axios，代码如下：

import axios from 'axios'

然后，我们需要为文件上传添加事件监听器。这个事件监听器将使我们能够在选择一个文件后，上传这个文件到服务器中。

export default {
  name: 'upload-file',
  methods: {
    handleUpload() {
      const fileInput = document.querySelector('input[type="file"]')
      const formData = new FormData()
      formData.append('file', fileInput.files[0])
      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
    }
  }
}

上述代码中，我们首先查找一个带有 type="file" 属性的元素，然后获取选择的文件。接着，我们创建了一个 FormData 对象，并将选择的文件添加到该对象中。最后，我们使用 Axios 的 post 请求方式将文件上传到服务器。

第三步：监听表单提交事件

后一步，我们需要使用Vue的篮子函数来监听表单提交事件。

<template>
  <div>
    <form @submit.prevent="handleUpload">
      <input type="file" name="upload">
      <button type="submit">upload</button>
    </form>
  </div>
</template>

这个事件监听器将执行我们之前编写的 handleUpload 方法来上传文件到服务器。请注意，我们使用了 @submit.prevent 事件修饰符来防止浏览器的默认提交行为。

3. 后端实现步骤

接下来我们需要实现服务器接收上传文件的后端服务。在这里，我们将使用Node.js和Express来构建我们的服务。下面是具体实现步骤。

第一步：安装Express和Multer

首先，我们需要在项目中安装express和multer两个npm包，执行下列命令可完成安装：

npm install --save express multer

第二步：实现文件上传处理

Multer库是Express中的一个中间件，用于处理各种上传请求。在我们的服务器端代码中，使用multer可便捷地实现文件上传处理。展示一段简单的Multer实例代码：

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

const app = express()

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname)
  }
})

const upload = multer({ storage: storage })

app.post('/upload', upload.single('file'), (req, res) => {
  console.log(req.file)
  res.send('Uploaded successfully')
})

app.listen(3000, () => {
  console.log('Server ready')
})

上述代码中，我们首先引入了Express和Multer两个库，然后创建了一个Express应用实例，并通过multer提供的API生成一个多文件上传实例。接着，我们定义了文件上传存储路径以及在上传完成后文件重命名的规则。最后，我们使用Express的post处理方法并将上传实例作为中间件传递，达到上传文件操作的目的。

4. 示例说明1

下面是一个demo，演示如何使用Vue和Express完成文件上传操作:

前端项目（使用Vue框架）放置在：localhost:8080
后端项目（使用express框架）放置在：localhost:3000

前端上传文件核心代码：

<template>
  <div>
    <h2>upload demo</h2>
    <form @submit.prevent="handleUpload">
      <input type="file" ref="fileInput" name="file" accept="image/*">
      <button type="submit">Upload</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      selectedFile: null
    }
  },
  methods: {
    handleUpload() {
      let formData = new FormData()
      formData.append('file', this.$refs.fileInput.files[0])

      axios.post('http://localhost:3000/upload', formData, {
        headers: {
          'content-type': 'multipart/form-data'
        }
      }).then(res => {
        console.log(res.data)
      })
    }
  }
}
</script>

后端接收上传文件核心代码：

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

app.use(express.static(__dirname + '/public'));

const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, 'public/uploads/')
  },
  filename: function(req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
  }
})

const upload = multer({
  storage: storage
})

app.post('/upload', upload.single('file'), (req, res) => {
  res.send('uploaded')
})

app.listen(3000, () => console.log('Server started...'))

代码说明：用户选择文件并点击提交按钮之后，通过Vue中的Axios发送文件到后端服务器localhost:3000/upload路由。后端接收到上传文件后存储到本地public/uploads/文件夹中，并返回"uploaded"字符串。

5. 示例说明2

下面是第二个示例，演示如何使用Vue和Spring Boot完成文件上传操作:

前端项目（使用Vue框架)放置在：localhost:8080
后端项目（使用Spring Boot框架)放置在：localhost:8081

前端上传文件核心代码：

<template>
  <div>
    <form>
      <input type="file" ref="fileInput" @change="handleFileInputChange">
      <button type="button" @click="handleUploadButtonClick">Upload</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'upload-file',
  data() {
    return {
      selectedFile: null
    }
  },
  methods: {
    handleFileInputChange(event) {
      this.selectedFile = event.target.files[0]
    },
    handleUploadButtonClick() {
      const formData = new FormData()
      formData.append('file', this.selectedFile)
      axios.post('http://localhost:8081/upload', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      }).then((response) => {
        console.log(response.data)
      })
    }
  }
}
</script>

后端接收上传文件核心代码：

@RestController
public class FileUploadController {

    @PostMapping("/upload")
    public String handleFileUpload(@RequestParam("file") MultipartFile file) {
        try {
            byte[] bytes = file.getBytes();
            Path path = Paths.get("uploads/" + file.getOriginalFilename());
            Files.write(path, bytes);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "Uploaded successfully: " + file.getOriginalFilename();
    }
}

代码说明：选择文件之后点击上传按钮后，Vue组件中的 handleUploadButtonClick 方法使用axios发起 post 请求，携带表单数据并指定请求头 Content-Type 为 multipart/form-data，将数据提交到服务器后端路由 http://localhost:8081/upload。后端路由中解析通过@RequestParam("file")获取指定"file"的文件并存储到本地文件夹uploads/中，然后返回"Uploaded successfully"字符串。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue中实现上传文件给后台实例详解 - Python技术站