vue image upload

Function Description:

1, calling camera phone

2, call the album function

3, image upload feature

4, image preview function

5, Picture delete function

Record multi-map upload component, the key points:
1, the INPUT add Multiple
2, the Accept = "Image / * deal with IOS, Android phones enabled camera
3, according to createObjectURL process image preview
4, formData constructor creates an empty object
5 by formData .getAll (), the file stream data into an array

Component Example FIG.

 

Component code upload_img.vue

<template>
  <div class="content">
    <div class="imgBox">
      <div class="uploadBox" v-for="(value, key) in imgs" :key="'uploadBox' + key">
        <img :src="getObjectURL(value)" alt="" class="uploadImg">
        <img src="../../assets/images/icon_x.png" alt="" class="closeImg" @click='delImg(key)'>
      </div>
      <div class="inputButton">
      <img src="../../assets/images/icon_photo.png" alt="" class="addImg">
        <input type="file" class="upload" @change="addImg" ref="inputer" multiple
          accept="image/*"/>
      </div>
      <div class="submitTask" @click="submit">
        上传图片
      </div>
    </div>
  </div>
</template>

 

js：

export default ({
  name: 'uploadPicture',
  data: function() {
    return {
      formData: new FormData(),
      imgs: {},
      imgLen: 0,
      txtVal: 0,
      desc: ''

    }
  },
  created() {

  },
  methods: {
    descInput() {
      // this.txtVal = this.desc.length;
    },
    addImg(event) {
      let inputDOM = this.$refs.inputer
      //DOM file data by taking 
      the this .fil = inputDOM.files
       // the console.log (inputDOM.files) 
      the let oldLen = the this .imgLen
       for (the let I = 0 ; I < the this .fil.length; I ++ ) { 
        the let size = the Math .floor ( the this .fil [I] .size / 1024 )
         IF (size> . 5 * 1024 * 1024 ) { 
          Alert ( ' select an image within 5M! ' )
           return  to false 
        } 
        the this .imgLen ++
        this.$set(this.imgs, this.fil[i].name + '?' + new Date().getTime() + i, this.fil[i])
        // console.log(this.imgs)
      }
      console.log('this.fil', this.fil)
      // this.imgs = this.fil
    },
    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) {
      this.$delete(this.imgs, key)
      this.imgLen--
    },
    // 提交上传图片
    submit() {
      for (let key in this.imgs) {
        let name = key.split('?')[0]
        this.formData.append('file', this.imgs[key])
      }
      this.formData.getAll('file')
      console.log('this.formData', this.formData)
      this.$refund.upload(this.formData)
    }
  }
})
</script>

Description:

    After the picture upload is complete, use the preview feature to make getObjectURL process.

Tips: 

formData.getAll is finally returned to an array

style:

<lang style = " less " >
 // outside of the box style 
.content { 
  width: 100 % ; 
  padding: 0 .16rem 0 ! Important; 
  .imgBox { 
    the display: Flex; 
    the display: -webkit- Flex; 
    Flex - direction: Row; 
    The justify -content: FLEX- Start; 
    align = left - items: Center; 
    Flex - wrap: wrap; 
  } 
} 

// preview image pattern 
.uploadBox { 
  position: relative; 
  width:30%;
  text-align: left;
  margin-right: 0.1rem;
  margin-bottom: 0.05rem;
  // 预览样式
  .uploadImg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
  }
  // 删除按钮
  .closeImg {
    width: 0.2rem;
    height: 0.2rem;
    position: absolute;
    top: 2%;
    right: 1% ; 
  } 
} 
// figure image icon 
.inputButton { 
  position: relative; 
  the display: Block; 
  width: . 1 .2rem; 
  height: . 1 .2rem;
   // Photo Style 
  .addImg { 
    the display: Block; 
    width: . 1 .2rem ; 
    height: . 1 .2rem; 
  } 
  // INPUT style 
  .upload { 
    width: . 1 .2rem; 
    height: . 1 .2rem; 
    Opacity: 0 ; 
    position: Absolute; 
    Top: 0 ;
    left: 0;
    z-index: 100;
  }
}
// 提交按钮
.submitTask {
    margin: auto;
    background: #EF504D;
    width: 30%;
    height: 0.3rem;
    color: #fff;
    font-size: 0.16rem;
    line-height: 0.3rem;
    text-align: center;
    border-radius: 0.1rem;
    margin-top: 0.8rem;
}
</style>

 

 

Welcome attention to public numbers, further technical exchange: