封装vue上传图片公共组件（即拿即用）

最新推荐文章于 2025-04-08 16:45:43 发布

原创

最新推荐文章于 2025-04-08 16:45:43 发布 · 847 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js #html #css #jquery

本文介绍了如何在Vue项目中封装一个通用的图片上传组件，适用于即拿即用。组件利用子组件处理上传逻辑，其中的`this.$getImgUrl.getimg()`方法需替换为自定义的图片上传到七牛云或其他服务器的实现。父组件可以直接调用并能正常工作，但注意可能存在因隐私信息删除导致的代码问题，需要自行调试。

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

封装vue上传图片公共组件（即拿即用）

子组件：

<template>
  <div class="up_img">
    <div class="up_img_button pr">
      <img class="bd-o u_i_b_img" src="../../assets/img/jzz/xiangjiupimg.png" height="25" width="30"/>
      <input type="file" id="img" class="upload jbank" @change="addImg" ref="inputer" accept="image/png,image/jpeg,image/gif,image/jpg"/>
      <p class="u_i_b_title">照片上传</p>
    </div>
    <div v-for='(value, key,index) in imgs' class="imgList">
      <p class="img pr">
        <img :src="getObjectURL(value)" style="width: 100%">
        <a class="close" @click="delImg(key,index)">×</a>