前端如何实现本地图片上传？-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端如何实现本地图片上传？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

摘要

对于学习前端的小伙伴都有一个困惑，就是平常想上手小项目，但碍于不想购买服务器，实践受到了限制。
一般我选择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 中间件来处理图片上传。具体实现步骤如下：

设置存储路径和文件名；
初始化上传配置对象；
创建一个路由用于处理文件上传；启动服务器，监听 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 变量，以便在页面上显示上传的图片。请注意，这只是一个简单的示例，实际上还需要对上传的图片进行一些检查和处理，例如检查文件大小、类型和命名等。文章来源地址https://www.toymoban.com/news/detail-450574.html

到了这里，关于前端如何实现本地图片上传？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！