封装一个图片上传组件的方法

最新推荐文章于 2025-03-05 11:16:48 发布
最新推荐文章于 2025-03-05 11:16:48 发布
阅读量1.9k 收藏 6
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68331234/article/details/125282814
版权
本文介绍了如何基于Element UI的upload组件，定制上传图片到腾讯云Cos的上传逻辑，并实现组件的v-model双向绑定，以实现在员工详情页中上传头像的功能。

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

今天的目标是封装一个组件，用来把图片上传到cos中。

组件要有两个功能

1. 展示图片（初始显示图片）

2. 修改图片

elementUI里upload组件已经是一个封装好了的组件我们可以对他进行二次封装即可

需求理解：

前端主动发起图片上传使用的是三方的腾讯云上传接口，前端得到一个已经上传完毕的图片地址，然后把这个地址当成一个接口字段 传给我们自己的后端服务

员工详情页

新建公共上传组件

我们的上传功能是基于element上传组件的二次开发，先准备好我们需要的elementUI上传组件，根据我们具体的业务需求选取一个合适的样例代码

在elementUI里复制src/components/UploadImg里代码  具体代码如下（子组件里）

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

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    upload(file) {
      console.log(file)
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isPNG) {
        this.$message.error('上传头像图片只能是 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isPNG && isLt2M
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

自定义上传配置

关键属性：:http-request="upload"     action="#"

使用自定义行为覆盖默认上传，注意一旦设置自定义上传行为之后，所有的上传操作都需要自己实现，比如数据处理，上传成功之后的后续操作，on-success钩子函数也不会继续触发

<template>
  <div>
    <!--
      show-file-list: 是否显示上传的文件列表

      action: '#' 用来指定文件要上传的地址，由于我们需要定制上传动作
             这里设为#
      :http-request：自定义上传行为（重点）

      on-success: 上传成功之后的回调
      before-upload： 上传之前的检查
    -->
    <el-upload
      class="avatar-uploader"
      action="#"
      :show-file-list="false"
      :before-upload="beforeAvatarUpload"
      :http-request="upload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>
<script>
  export default {
      methods:{
         upload(params){
             console.log(params)
         }
      }
  }
</script>

注册一个全局组件

我的位置是在src/components/index.js （位置随意）

// 全局注册组件
// 省略其他....
+ import UploadImg from '@/components/UploadImg'

// 1.定义插件(拓展Vue的功能)
const MyPlugin = {
  install(Vue) {
    // 省略其他....
 +   Vue.component(UploadImg.name, UploadImg)

  }
}
export default MyPlugin

随机找一个地方测试 

封装组件-上传图片到腾讯云

前置基础：

1.在云服务器上的准备：申请cos服务器，配置密钥,设置cors访问

2.在代码层面的准备：

(1) 下载一个官方提供的操作cos服务的包(cos-js-sdk-v5)

(2) 用自己的密钥去实例化cos

 (3) 具体做上传

第一步：在项目中安装依赖 ：

npm i cos-js-sdk-v5 --save

第二步：实例化cos对象

在src/components/UploadImg中

// 下面的代码是固定写法
const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({
  SecretId: 'xxx', // 身份识别ID
  SecretKey: 'xxx' // 身份秘钥
})

上边用到的SecretId和SecretKey在这里找到：

使用cos对象完成上传 

主要是用cos.putObjectapi来完成上传功能，代码如下：

upload(res) {
  if (res.file) {
    // 执行上传操作
    cos.putObject({
      Bucket: 'xxxxxx', /* 存储桶 */
      Region: 'xxxx', /* 存储桶所在地域，必须字段 */
      Key: res.file.name, /* 文件名 */
      StorageClass: 'STANDARD', // 上传模式, 标准模式
      Body: res.file // 上传文件对象
    }, (err, data) => {
      console.log(err || data)
      // 上传成功之后
      if (data.statusCode === 200) {
        this.imageUrl = `https:${data.Location}`
      }
    })
  }
}

上边的Bucket和Region在这里可以找到 

用户详情页中使用上传组件-v-model 

我们希望达成的目标是：在upload-img上可以使用v-model做双向绑定。如下：

 <el-form-item label="员工头像">
        <!-- 放置上传图片 -->
        <Uploadimg v-model="userInfo.staffPhoto" />
        <img>
      </el-form-item>

upload-img: 自定义的组件， v-model：双向绑定。

v-model是一个语法糖。

<com v-model="imageUrl" />

上面的写法等价于:

<com :value="imageUrl" @input="val=>imageUrl=val" />
1. 给子组件内部传一个名为value的属性，属性值就是绑定的数据项
2. 在子组件监听一个名为input的事件，回调函数是：将收到的参数值保存到数据项中

父组件：v-model绑定值

<upload-img v-model="userInfo.staffPhoto" />

子组件（图片上传组件）

  1. 定义props value来接收父组件传入的图片地址
  2. 直接用value来显示图片（把原来 imageUrl删除了）
  3. 在上传成功之后，this.$emit('input', 新地址)， 抛给父组件，达到更新父组件中v-model绑定数据项
<template>
  <div>
    <el-upload
      class="avatar-uploader"
      action="#"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :http-request="upload"
    >
      <img v-if="value" :src="value" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>

<script>
// 下面的代码是固定写法
const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({
  SecretId: 'AKIDBE7mCMGvzrYbS8bpoaEguuiJitvogOYX', // 身份识别ID
  SecretKey: 'zlIaeaL2au1tXxAAvRiGdqpbCalhU7Ys' // 身份秘钥
})
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    upload(res) {
      console.log(res)
      cos.putObject(
        {
          Bucket: 'dd-1312484638' /* 存储桶 */,
          Region: 'ap-guangzhou' /* 存储桶所在地域，必须字段 */,
          Key: res.file.name /* 文件名 */,
          StorageClass: 'STANDARD', // 上传模式, 标准模式
          Body: res.file // 上传文件对象
        },
        (err, data) => {
          console.log(err || data)
          // 上传成功之后
          if (data.statusCode === 200) {
            const imageUrl = `https:${data.Location}`
            this.$emit('input', imageUrl)
          }
        }
      )
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isPNG) {
        this.$message.error('上传头像图片只能是 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isPNG && isLt2M
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

 最后小结一下

图片上传组件整个工作过程

 

图片上传组件
Xp545945的博客
03-10 490
项目需要多张图片上传回显，图片上传后返回图片ID，不返回url，需要通过图片ID获取token然后再拼接成图片下载的URL。选择el-upload组件进行开发。
vue 基于 el-upload 封装图片上传组件
且听风吟的博客
12-18 1410
新建image-upload.vue 文件： 在这里插入代码片 在需要上传图片的页面，直接引入组件使用即可： <template> <div> <img-upload v-model="img" :size="'small'" :tips="'单图字符串'" :limit="1" :limitSize="5"></img-upload> <img-upload v-model="imgs" :size="'small'" :
图片上传组件_单图片上传组件
weixin_30290131的博客
01-12 162
单图上传，调用存图接口，后台返回图片路径效果图组件代码import React, { PureComponent, Fragment } from 'react'; import { Upload, Icon, message } from 'antd'; import { connect } from 'dva'; @connect(({ file, loading }) => ({ ...
前端 - vue - - elementui上传文件组件封装
最新发布
yky1071442177的博客
03-05 932
elementui的upload控件提供了各种配置 我们需要用到的有 list-type（文件列表表现类型）、file-list（绑定的文件数据）、limit（限制上传个数）、accept（限制上传类型）、before-upload（上传前的回调）、http-request（自定义上传）、on-remove（移除时的回调）、v-loading（加载中效果 看需求而定）
微信小程序图片上传组件
Lyq2017901206的博客
07-20 1078
注意：示例中的路径和文件名仅供参考，实际开发中的路径和文件名请根据自己的项目结构和需求进行调整。 通过以上步骤，你就可以封装一个图片上传组件并在小程序中使用了。用户在页面中点击上传按钮时，会弹出选择图片的对话框，选择图片后会将图片上传到指定的服务器地址，并将上传成功后的图片地址保存到组件内部的图片列表中。用户可以通过点击图片删除按钮来删除已上传的图片。
[Vue]对图片上传组件的封装
01-20
本文将详细解析如何封装一个名为`ImgUpload`的图片上传组件，并介绍其中涉及的关键知识点。 首先，组件的核心代码如下： ```vue <!-- 组件模板 --> export default { name: 'ImgUpload', data () { return...
带你封装一个上传图片组件(ant design+react)
歌谣的博客
11-03 814
目录 需求实现 实现效果 代码封装 UploadImage组件 备注 BaseUploadImage组件 index.less 样式文件 父组件引用 需求实现 1可以支持上传最多九张图片 2图片支持预览 替换 删除 3支持自定义上传文件大小 格式 未上传提示 实现效果 代码封装 UploadImage组件 * @Description: 公共上传图片 * @param {Array} type 图片格式。默认类型为png，jpeg * ...
微信小程序封装上传文件组件
03-10
为了实现这一功能，开发者通常需要封装一个专门用于上传文件的组件。本篇将详细探讨如何在微信小程序中封装一个上传图片的组件，并讨论相关的技术要点。 首先，微信小程序提供了`wx.chooseImage`接口，用于让用户从...
上传图片组件
海阔天空
12-27 85
<template> <div class="row"> <form action="/" method="post" id="uploadForm" enctype="multipart/form-data"> <div>附件上传</div> <div class="file-box"> <van-icon name="plus"/> <input
图片上传组件(自带图片压缩)
02-09
上传组件支持图片压缩,基于jquery,spring ,struts2, ibatis 框架, 真实可用,自己开发的组件,公司项目大规模使用
HTML上传总结
wangshengfei
05-27 557
1. 问题： https://zhuwenlong.com/blog/51f6519532ffd70b27000001 HTML5 File api 实现断点续传 http://www.jianshu.com/p/2a42a0c89640 html5 上传本地图片处理各种问题 2. 组件： http://fex.baidu.com/webuploader/
【AntDesign】图片自定义上传组件 超详细含代码及解读~
每天进步一点点, 靠近小目标一点点~
05-09 1958
AntDesign 图片自定义上传组件
【组件】element图片上传组件
Meditation_Crazy
11-05 643
前言 封装的图片上传组件 <template> <div class="public-upload-image"> <el-upload ref="uploadImage" action="https://upload.qiniup.com" :on-success="handleAvatarSuccess" :before-upload="beforeUpload" :data="upToken" .
小程序图片上传组件
qq_52441253的博客
12-01 608
上传图片组件封装
实战：图片上传组件开发
程序员之家
02-03 2682
写在前面图片上传，作为web端一个常用的功能，在不同的项目中有不同的需求，在这里实现一个比价基本的上传图片插件，主要能实现图片的浏览，剪裁，上传这三个功能，同时也是为了让自己对图片／文件上传和HTML5中名声在外的 canvas相关能够有一些了解。我就要自行车 - 需求整理放眼WWW，一般的图片上传模块，主要就是实现了三个功能，图片的预览，图片的剪裁及预览，图片的上传，那我也就整这么一个吧，再细化
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值