写的比较简易可以自己到时候再优化代码
第一种方式 ：vue或者uniapp上传图片的时候就把图片转化成base64位，然后通过post请求把base64带过去node
node的操作就是将base64转化成buffer流，然后操控写入文件即可
uniapp代码：
<template>
<view class="content">
<button @click="up">选择图片</button>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
// 上传图片
up() {
uni.chooseImage({
//定义 选择的 数量
count: 1,
success: (res) => {
//获取 图片 链接
let imgUrl = res.tempFilePaths[0]
uni.request({
url: imgUrl,
//设置arraybuffer对象 类型
responseType: "arraybuffer",
success: (res) => {
if (res.statusCode === 200) {
let data = res.data
//转换成 base64编码
const base64 = uni.arrayBufferToBase64(data)
// console.log('base64', base64)
//发起请求
uni.request({
url: "http://localhost:3000/uploadImg",
method: "post",
data: {
img: base64
},
success(res) {
console.log('res', res)
},
fail(err) {
console.log('err', err)
}
})
}
}
})
}
})
}
}
}
</script>
vue的代码：
<template>
<div class="my">
<div
class="my-bg"
:style="{ backgroundImage: `url('${userInfo.userBg}')` }"
>
<van-uploader class="upload-box" :after-read="uploadBg" />
</div>
</div>
</template>
<script>
import { findMy, updateUserBg } from "@/api/api";
import "../assets/less/my.less";
export default {
....
methods: {
// 上传背景
uploadBg(file) {
//
//允许文件类型
let type = ["gif", "png", "jpg", "jpeg"];
//允许最大文件大小 1MB
let size = 1;
//判断文件类型
let fileType = file.file.type.split("/")[1];
if (type.indexOf(fileType) === -1) {
this.$toast(`文件类型只支持${type.join(",")}`);
return;
}
//判断文件大小 B, 1024B = 1KB, 1024KB = 1MB
let fileSize = file.file.size / 1024 / 1024;
if (fileSize > size) {
this.$toast(`文件允许最大不能超过${size}MB`);
return;
}
// 处理base64的标记data:image/jpeg;base64,
let base64 = file.content.replace(/^data:image\/[A-Za-z]+;base64,/, "");
// 然后再次上传发送请求
},
},
};
</script>
node的代码：
找个空的文件夹打开终端需要安装的命令：
npm init
npm install express --save
npm install cors
npm install body-parser
const express = require('express')
const app = express()
const port = 3000;
const fs = require("fs");
// 跨域处理
var cors = require('cors')
app.use(cors())
// 跨域处理
// 记得在app设置静态目录 不然无法访问你的图片
app.use(express.static('upload'))
global.__basename = __dirname;
// 引入，不然post的body的值办法拿到
var bodyParser = require('body-parser')
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({
extended: false
}))
// parse application/json
// app.use(bodyParser.json());
// 设置图片上传的大小的写法
app.use(bodyParser.json({
limit: '50mb'
}));
app.use(bodyParser.urlencoded({
limit: '50mb',
extended: true
}));
// 引入，不然post的body的值办法拿到
app.get('/', (req, res) => {
res.send('Hello World!')
})
// 上传图片
app.post('/uploadImg', (req, res) => {
// console.log('req',req.body)
let base = req.body.img
// 开始写入文件了
//创建Buffer将文件信息转成二进制文件
let buffer = Buffer.from(base, 'base64')
let data = new Date().getTime();
//创建文件名称
let filename = data + `.jpeg`
//将buffer写入服务器中
// fs.writeFile(写入文件保存的路径, buffer, err => {})
let fileUrl = path.resolve(__dirname, `upload/${filename}`)
//
fs.writeFile(fileUrl, buffer, (err) => {
if (err) {
//上传图片失败
console.log('err',err)
res.send({
msg: '添加失败',
code: 802
})
} else {
//成功的时候处理的
res.send({msg:"上传成功了"})
}
})
})
// 上传图片
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
第二种：是利用 multer 库将图片上传到服务器
vue代码:
<template>
<div>
<input type="file" @change="handleFileChange">
<button @click="upload">上传图片</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
selectedFile: null
};
},
methods: {
handleFileChange(event) {
// 获取用户选择的文件
this.selectedFile = event.target.files[0];
console.log("this.selectedFile",this.selectedFile)
},
upload() {
// 创建一个FormData对象
const formData = new FormData();
// 将选择的文件添加到FormData对象中
formData.append('file', this.selectedFile);
formData.append('name', '小明');
// 使用axios或其他HTTP库发送FormData到服务器
axios.post('http://localhost:3000/uploadImg', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
// 处理上传成功后的响应
console.log('response',response);
}).catch(error => {
// 处理上传错误
console.error(error);
});
}
}
};
</script>
node代码：
const express = require('express')
const app = express()
const port = 3000;
const fs = require("fs");
// 跨域处理
var cors = require('cors')
app.use(cors())
// 引入
const multer = require('multer')
// 设置图片的情况
const storage = multer.diskStorage({
// req就是传递的参数，file是文件的信息
destination: function(req, file, cb) {
// 存储图片的位置
cb(null, 'upload')
},
// req就是传递的参数，file是文件的信息
filename: function(req, file, cb) {
// console.log('req和file',file,req.body)
//
const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
// 这是文件的名字 '.jpeg' 是写死的，可以自己去传递过来
cb(null, file.fieldname + '-' + uniqueSuffix + '.jpeg')
}
})
const upload = multer({
storage: storage
})
// 设置图片的情况
// 跨域处理
// 记得在app设置静态目录 不然无法访问你的图片
app.use(express.static('upload'))
global.__basename = __dirname;
// 引入，不然post的body的值办法拿到
var bodyParser = require('body-parser')
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({
extended: false
}))
// parse application/json
// app.use(bodyParser.json());
// 设置图片上传的大小的写法
app.use(bodyParser.json({
limit: '50mb'
}));
app.use(bodyParser.urlencoded({
limit: '50mb',
extended: true
}));
// 引入，不然post的body的值办法拿到
// file 这个字段要符合前端的字段才可以
app.post('/uploadImg', upload.single('file'), function(req, res, next) {
// req.file is the `avatar` file
// req.body will hold the text fields, if there were any
console.log("req", req.body)
res.send({
msg: '返回了'
})
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
