Vue+NodeJS上传图片到腾讯云Cos

一.前端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
"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 express
 
npm i cos-nodejs-sdk-v5
 
npm i cors
 
npm i multer
 
npm 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.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 = uploadImage

3.配置文件

新建一个.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权限开放问题