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

卷小白

已于 2023-09-05 21:33:37 修改

阅读量1.3k

点赞数 3

文章标签： vue.js javascript 前端 node.js 腾讯云

于 2023-09-05 12:01:18 首次发布

本文链接：https://blog.csdn.net/m0_71469120/article/details/132687272

版权

本文介绍了如何在前端使用Vue和后端Express框架配合Multer和COSNodeSDK处理图片上传，包括本地预览、文件类型判断、Base64转换和COS上传流程，以及相应的配置和错误处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.前端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="">

最低0.47元/天解锁文章