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

一.前端Vue

1.选择图片

html 复制代码

--HTML
<input type="file" accept="image/*" @change="handleFileChange">
<el-button  size="large" @click="changeAvatar">上传头像</el-button>

javascript 复制代码

//选择图片
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.实现上传前的本地预览

javascript 复制代码

--HTML
<img  style="border-radius: 50%;"  :src="DataUrl" alt="">

javascript 复制代码

//定义数据
const DataUrl=ref('')

function handleFileChange(event){
//图片大小,类型验证
......

//读取数据
const reader=new FileReader()
reader.onload=e=>{
  DataUrl.value=e.target.result
 }
reader.readAsDataURL(selectedFile)

}

此时读取后得到的是

后面包含base64,将base64上传到后端进行处理 ,如果图片文件稍大,后端就会出现请求体过长的错误.不适合大文件上传.我们这里就只用它来做本地预览

3.获取上传到后端必须的数据

javascript 复制代码

//定义数据
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.上传图片

javascript 复制代码

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);
  });
}

二.后端

后续需要的第三方包

javascript 复制代码

npm i express

npm i cos-nodejs-sdk-v5

npm i cors

npm i multer

npm i dotenv

javascript 复制代码

    "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服务搭建

javascript 复制代码

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

javascript 复制代码

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文件

javascript 复制代码

# COS
SecretId='密钥ID'
SecretKey='密钥'
Bucket='桶名称'
Region='所在地域'

新建一个config.js文件

javascript 复制代码

const dotenv = require("dotenv")
 
dotenv.config()
 
module.exports = {
  SecretId,
  SecretKey,
  Bucket,
  Region,
} = process.env

到此Vue上传图片到COS就完成了,后续可以将图片链接存到数据库进行操作.代码有错误的地方欢迎指正.如果使用出现错误也可留言.同时也要注意你的COS权限开放问题