最全教程：用Vite和Element-Plus实现便捷图片上传

2023-06-01 22:21:22

Vite 与 Element-Plus 强强联手：图片上传功能轻松 get

简介

在现代 Web 开发中，图片上传功能可谓必不可少。无论是个人博客、电商网站，还是社交媒体平台，用户都免不了上传图片来丰富内容。本文将手把手教你如何使用 Vite、Element-Plus 和 Axios 这三大神器，在你的项目中轻松实现图片上传功能。无论是前端开发人员还是初学者，都能从中学到干货！

前期准备

在开始之前，确保已安装 Vite、Element-Plus 和 Axios。如果没有，请根据以下链接进行安装：

安装依赖

首先，在项目中安装必要的依赖：

npm install vite element-plus axios

创建 Vite 项目

创建一个新的 Vite 项目：

mkdir my-project
cd my-project
npm init vite

配置 Vite

在项目的根目录下，打开 vite.config.js 文件，添加以下配置：

module.exports = {
  plugins: [
    require('vite-plugin-element-plus')()
  ]
}

创建 Element-Plus 上传组件

在项目的 src 目录下，创建一个名为 Upload.vue 的文件，并添加以下代码：

<template>
  <el-upload
    :action="uploadUrl"
    :multiple="true"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button>选择文件</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: 'http://localhost:3000/upload'
    }
  },
  methods: {
    handleSuccess(res) {
      console.log('图片上传成功', res)
    },
    handleError(err) {
      console.error('图片上传失败', err)
    }
  }
}
</script>

在页面中使用上传组件

在项目的 App.vue 文件中，添加以下代码：

<template>
  <Upload />
</template>

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

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

运行项目

在项目根目录下，运行以下命令启动项目：

npm run dev

现在，打开浏览器访问项目，你将看到一个文件上传组件。点击 "选择文件" 按钮，选择要上传的图片，再点击 "上传" 按钮，图片就会被上传到服务器。

实现上传图片功能

在项目的 server.js 文件中，添加以下代码实现图片上传功能：

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

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

const upload = multer({ storage })

app.post('/upload', upload.single('file'), (req, res) => {
  res.json({
    success: true,
    message: '图片上传成功',
    data: {
      url: req.file.path
    }
  })
})

app.listen(3000)

现在，可以使用 Axios 库将图片上传到服务器。在项目的 Upload.vue 文件中，添加以下代码：

import axios from 'axios'

export default {
  // ...
  methods: {
    // ...
    uploadImage(file) {
      const formData = new FormData()
      formData.append('file', file)

      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
        .then(res => this.handleSuccess(res))
        .catch(err => this.handleError(err))
    }
  }
}