封装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>
      </p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "UpImg",
    data(){
      return{
        formData:new FormData(), // 图片对象，七牛云需要使用这种方式
        imgs: {},
        imgLen:0,
        senddataimg:[],
      }
    },
    methods:{
      addImg(event){
        let up = $('.jbank')[0]; //获取到input的节点
        let inputDOM = this.$refs.inputer;
        // 通过DOM取文件数据
        this.fil = inputDOM.files;
        let oldLen=this.imgLen;
        let len=this.fil.length+oldLen;
        if(len>4){
          alert('最多可上传4张，您还可以上传'+(4-oldLen)+'张');
          return false;
        }
        for (let i=0; i < this.fil.length; i++) {
          let size = Math.floor(this.fil[i].size / 1024);
          if (size > 10*1024*1024) {
            alert('请选择10M以内的图片！');
            return false
          }
          this.imgLen++;

          this.$getImgUrl.getimg(up.files[0], res=>{
            console.log(res)
            let arr = [res];
            this.senddataimg.push(...arr);
          });
          this.$emit("senddataimg",this.senddataimg)
          this.$set(this.imgs,this.fil[i].name+'?'+new Date().getTime()+i,this.fil[i]);
          console.log(this.imgs)
        }
      },
      getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
          url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
          url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
          url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
      },
      delImg(key,index){
        this.$delete(this.imgs,key);
        this.senddataimg.splice(this.senddataimg.indexOf(key))
        this.$emit("senddataimg",this.senddataimg)
        this.imgLen--;
      },
    }
    }

</script>

<style scoped lang="stylus" type="text/stylus">
  .up_img
    display flex
    flex-wrap wrap
    justify-content left
    .up_img_button
      margin-right .1rem
      background: #F5F5F5
      overflow: hidden
      width 30%
      max-width: 1.1rem
      height: 1.1rem
      .u_i_b_img
        margin auto
        margin-top .3rem
        margin-bottom .1rem
      .u_i_b_title
        text-align: center
        color: #999999
        font-size: .13rem
      .upload
        opacity 0
        position: absolute;
        top: 0;
        left: 0;
        width: 1.1rem;
        height: 1.1rem;
    .imgList
      margin-right .1rem
      width 30%
      max-width: 1.1rem
      height: 1.1rem
      .img
        .close
          top 0
          right 0
          position absolute
</style>

代码中调用的this.$getImgUrl.getimg(）是我自己封装的上传七牛云的js，这里换成你自己的就好了；传自己的服务器或者第三方看你们公司用啥。

父组件：

<template>
  <div class="complaint">
        <UpImg @senddataimg="senddataimg"></UpImg>
  </div>
</template>

<script>
  import UpImg from '../public/UpImg'
  export default {
    name: "Complaint",
    data(){
      return {
        listenChildImg:''
      }
    },
    mounted(){
    },
    methods:{
      sendMassage(){
        this.verified();
        let ok = 1;
        console.log(this.issuccess)
        this.issuccess.forEach((item,index)=>{
          if(!item){
            ok++;
          }
          console.log(item,ok)
        });
        if(this.listenChildImg){
          let arr = [];
          let i = 0;
          this.listenChildImg.forEach((item, index)=>{
            if(item !== false){
              arr[i] = item;
              i++;
            }
          });
          this.listenChildImg = arr
        }
        if(this.listenChildImg.length>4 || this.listenChildImg.length<1){
          this.$timealert.timealert();
          this.alertContent = "请上传图片，最少上传1张，如有多余请删除（上传图片需要一点时间，请耐心等待）"
        }
    	// 给服务器发数据的就不给你了，自己写去
      },
      senddataimg(senddataimg){
        this.listenChildImg = senddataimg
        console.log(this.listenChildImg);
      }
    },
    components: {
      UpImg
    }
  }
</script>

<style scoped lang="stylus" type="text/stylus">
  // 样式自己写去
</style>

代码如果出现问题，自己调试一下，我删除隐私信息可能没删对，此代码在项目中可以正常运行。

最后

以上就是健壮芹菜为你收集整理的封装vue上传图片公共组件（即拿即用）封装vue上传图片公共组件（即拿即用）的全部内容，希望文章能够帮你解决封装vue上传图片公共组件（即拿即用）封装vue上传图片公共组件（即拿即用）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。