Vue2项目中实现头像上传

最新推荐文章于 2024-04-10 00:12:20 发布

诗霖雪

最新推荐文章于 2024-04-10 00:12:20 发布

阅读量790

点赞数 8

分类专栏：项目问题文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_56713342/article/details/135883347

版权

上传头像，首先要有一个可以存储头像的服务器，在腾讯云上注册账号，建一个可以上传头像的存储桶，将头像上传到此即可

腾讯云：产品--->存储--->对象存储--->开始使用--->存储桶列表--->创建存储桶---->配置管理--->基础配置---->基本信息--->存储桶信息，所属地域，安全管理，跨域访问CORS设置，访问管理，新建一个密钥，并保存该密钥的信息，SecretId，SecretKey

<template>
  <el-upload
    class="avatar-uploader"
    action=" "
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    :http-request="uploadImg"
  >
    <img v-if="value" :src="value" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon" />
  </el-upload>
</template>

<script>
import COS from 'cos-js-sdk-v5'
export default {
  props: {
    value: {
      default: '',