一.前端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);});
}二.后端
后续需要的第三方包
npm i expressnpm i cos-nodejs-sdk-v5npm i corsnpm i multernpm i dotenv"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.pngBody: img.buffer, // 上传文件的内容，可以为 FileStream、字符串、Buffer, 我们这里接收二进制BufferonProgress: 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权限开放问题
