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

易小川不懂赵高

于 2020-03-18 16:30:32 发布

阅读量847

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue vue.js html css jquery

本文链接：https://blog.youkuaiyun.com/jizhuangzhuang_/article/details/104947685

本文介绍了如何在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>

最低0.47元/天解锁文章