前端如何实现本地图片上传？

摘要

对于学习前端的小伙伴都有一个困惑，就是平常想上手小项目，但碍于不想购买服务器，实践受到了限制。
一般我选择node.js搭建服务器，毕竟基于JavaScript语言，简直不是一家人不进一家门。
但是，刚学node.js只会链接数据库进行增删改查，图片上传简直就是渣渣……
现在，我的思路是这样的，在没有云服务器的情况下，利用node.js搭建本地服务器，将图片放在项目项目目录下，名字最好排序，方便前端项目遍历……

前端页面设计和代码实现

在前端页面中需要包含一个表单，用于用户上传图片。表单中需要设置 enctype 属性为 “multipart/form-data”，这样才能上传二进制文件（图片）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="http://127.0.0.1:3000/upload" method="post" enctype="multipart/form-data" target="_parent">
      <input type="file" name="image" />
      <input type="submit" value="上传" />
    </form>
  </body>
</html>

后端服务器代码实现

安装模块

1. npm init -y
 2. npm i express multer -S

在后端服务器中，需要使用 Node.js 的 express 框架来创建路由。具体的实现方式如下：

const express = require('express')
const multer = require('multer')
const app = express()
let index = 0
//设置存储路径和文件名
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads')
  },
  filename: function (req, file, cb) {
    index += 1
    cb(null, index + '.png')
  }
})

const upload = multer({ storage: storage })

app.post('/upload', upload.single('image'), function (req, res, next) {
  const file = req.file
  if (!file) {
    const error = new Error('请上传图片')
    error.httpStatusCode = 400
    return next(error)
  }
  res.send({ msg: '上传成功' })
})

app.listen(3000, function () {
  console.log('服务器已经启动')
})

在上述代码中，使用了 multer 中间件来处理图片上传。具体实现步骤如下：

  1. 设置存储路径和文件名；
  2. 初始化上传配置对象；
  3. 创建一个路由用于处理文件上传； 启动服务器，监听 3000 端口。

封装组件

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

<script>
export default {
  name: "ImageUploader",
  data() {
    return {
      file: null,
      imageUrl: "",
    };
  },
  methods: {
    handleUpload(event) {
      this.file = event.target.files[0];
    },
    uploadImage() {
      const formData = new FormData();
      formData.append("image", this.file);
      // 发送上传请求
      axios.post("/upload", formData).then((res) => {
        this.imageUrl = res.data.imageUrl;
      });
    },
  },
};
</script>

这个组件包含一个文件选择框和一个上传按钮，用户可以通过选择文件来上传图片。当用户点击上传按钮时，会将图片通过 axios 库发送给后端 /upload 接口进行处理，然后将图片链接赋值给 imageUrl 变量，以便在页面上显示上传的图片。请注意，这只是一个简单的示例，实际上还需要对上传的图片进行一些检查和处理，例如检查文件大小、类型和命名等。