前端如何实现本地图片上传?
摘要
对于学习前端的小伙伴都有一个困惑,就是平常想上手小项目,但碍于不想购买服务器,实践受到了限制。
一般我选择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 -y2. 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 += 1cb(null, index + '.png')}
})const upload = multer({ storage: storage })app.post('/upload', upload.single('image'), function (req, res, next) {const file = req.fileif (!file) {const error = new Error('请上传图片')error.httpStatusCode = 400return 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 变量,以便在页面上显示上传的图片。请注意,这只是一个简单的示例,实际上还需要对上传的图片进行一些检查和处理,例如检查文件大小、类型和命名等。