一.前端Vue
1.选择图片
--HTML
<input type="file" accept="image/*" @change="handleFileChange">
<el-button size="large" @click="changeAvatar">上传头像</el-button>//选择图片
function handleFileChange(event){
const selectedFile = event.target.files[0];
if (!selectedFile) {
return;
}
//定义图片可传入的类型
const allowedTypes = ['image/jpeg', 'image/png','image/jpg'];
//定义图片的最大尺寸--字节
const maxSize = 1000000;
if (!allowedTypes.includes(selectedFile.type)) {
return;
}
if (selectedFile.size > maxSize) {
return;
}
}2.实现上传前的本地预览
--HTML
<img style="border-radius: 50%;" :src="DataUrl" alt="">//定义数据
const DataUrl=ref('')
function handleFileChange(event){
//图片大小,类型验证
......
//读取数据
const reader=new FileReader()
reader.onload=e=>{
DataUrl.value=e.target.result
}
reader.readAsDataURL(selectedFile)
}此时读取后得到的是
后面包含base64,将base64上传到后端进行处理 ,如果图片文件稍大,后端就会出现请求体过长的错误.不适合大文件上传.我们这里就只用它来做本地预览
3.获取上传到后端必须的数据
//定义数据
const imgType=ref('')
const code=ref({})
function handleFileChange(event){
//图片大小,类型验证
......
//得到图片的类型后缀
const index=selectedFile.type.indexOf('/')
imgType.value=selectedFile.type.slice(index+1)
//包括开始,不包括结尾
//selectedFile--图片对象
code.value=selectedFile
//读取数据
...
}4.上传图片
async function changeAvatar(){
const formData = new FormData();
formData.append('image',code.value); //图片对象
formData.append('fileType', imgType.value); // 添加文件类型信息
await axios.post('http://127.0.0.1:3000/upload',formData)
.then((response) => {
// 处理后端的响应
console.log('上传成功',response );
}).catch((error) => {
// 处理上传失败的情况
console.error('上传失败', error);
});
}
二.后端
后续需要的第三方包
"cors": "^2.8.5",
"cos-nodejs-sdk-v5": "^2.12.4",
"dotenv": "^16.3.1",
"express": "^4.18.2",
"multer": "^1.4.5-lts.1",
1.express服务搭建
const express = require('express')
const cors = require('cors');
const multer = require('multer'); // 处理文件上传的中间件
const app = express()
app.use(cors()) //跨域处理
// 配置文件上传的存储路径和文件名
const storage = multer.memoryStorage(); // 在内存中处理文件上传
const upload = multer({ storage });
//COS图片上传请求
router.post('/upload', upload.single('image'), async(req, res) => {
const uploadedImage = req.file;
const fileType = req.body.fileType; // 从请求体中获取文件类型
if (!uploadedImage) {
return res.status(400).send('没有上传文件');
}
const avatar_url=await uploadImage(req.file,fileType)
res.send({data:{avatar_url}})
});
app.listen(3000, () => {
console.log('server running ...');
})2.上传到腾讯云Cos
const COS = require('cos-nodejs-sdk-v5')
const {SecretId,SecretKey,Bucket,Region}=require('../config')
const cos = new COS({
SecretId,
SecretKey,
})
const path="avatar/" //腾讯云Cos桶下的文件夹
async function uploadImage(img,type) {
try {
const data = await cos.putObject({
Bucket, // 存储桶名称
Region, // 存储桶所在地域
Key:path + new Date().getTime()+`.${type}`, // 可以理解为图片存储的路径+名称(唯一) 例如：indexImages/1670050961361.png
Body: img.buffer, // 上传文件的内容，可以为 FileStream、字符串、Buffer, 我们这里接收二进制Buffer
onProgress: function (progressData) {
console.log(progressData)
}
})
const imageUrl = `https://${data.Location}`
return imageUrl
}
catch (error) {
console.log(error)
}
}
module.exports = uploadImage3.配置文件
新建一个.env文件
# COS
SecretId='密钥ID'
SecretKey='密钥'
Bucket='桶名称'
Region='所在地域'新建一个config.js文件
const dotenv = require("dotenv")
dotenv.config()
module.exports = {
SecretId,
SecretKey,
Bucket,
Region,
} = process.env到此Vue上传图片到COS就完成了,后续可以将图片链接存到数据库进行操作.代码有错误的地方欢迎指正.如果使用出现错误也可留言.同时也要注意你的COS权限开放问题
