Vue + FormData + Axios 图片上传从新手到入门

前端

2023-12-16 05:50:16

图片上传入门指南：用 Vue、FormData 和 Axios 征服图片世界

在当今数字时代，图片已成为网站和应用程序中不可或缺的一部分。它们让用户界面更具吸引力、内容更具吸引力。如果你想让你的网站脱颖而出，掌握图片上传的技巧至关重要。

本指南将一步一步地带你领略图片上传的神奇世界，让你从新手晋级为入门高手。我们将使用 Vue.js、FormData 和 Axios 来实现图片上传，让你轻松应对各种图片处理场景。

准备工作

踏上图片上传之旅之前，你需要配备以下必备工具：

Node.js
Vue.js
Axios
FormData

项目搭建

创建一个新的 Vue 项目，并安装 Axios：

npm install axios

打造 FormData

FormData 是一个 JavaScript 对象，用于构建表单数据。它可以轻松处理文件上传。

创建上传组件

接下来，创建一个名为 Upload.vue 的组件，负责处理图片上传：

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

<script>
import axios from 'axios'

export default {
  methods: {
    onFileChange(event) {
      this.file = event.target.files[0]
    },
    onSubmit() {
      const formData = new FormData()
      formData.append('file', this.file)

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

配置后端路由

在你的后端代码中，配置一个路由，用于处理图片上传：

app.post('/upload', async (req, res) => {
  const file = req.files.file

  // 保存文件
  await file.mv('uploads/' + file.name)

  // 返回成功信息
  res.json({
    success: true,
    message: '上传成功'
  })
})

集成组件

现在，将 Upload 组件添加到你的 Vue 项目中：

<template>
  <div>
    <Upload />
  </div>
</template>

<script>
import Upload from './components/Upload.vue'

export default {
  components: {
    Upload
  }
}
</script>