vue input 上传图片、预览、删除

使用原生上传图片、预览、删除；multiple实现可上传多张

html部分

		
"single case-image">
          案例图片
          
"control-form">
            
"help-block">(建议图片格式为：JPEG/BMP/PNG/GIF，大小不超过5M)
            
"upload-imgs">
              

                "file" class="upload" @change="addImg" ref="inputer" multiple accept="image/png,image/jpeg,image/gif,image/jpg"/>
                "add">"iconfont icon-plus">
点击上传
              
              
'(value, key) in imgs'>
                
"img"><img :src="getObjectURL(value)">"close" @click="delImg(key)">×
              
            
          
        

js部分

<script>
  export default{
    data(){
      return {
        formData:new FormData(),
        imgs: {},
        imgLen:0,
      }
    },
    methods: {
      exitEdit(){
        this.$emit('closeEdit', false)
      },
      addImg(event){
        let inputDOM = this.$refs.inputer;
        // 通过DOM取文件数据
        this.fil = inputDOM.files;
        let oldLen=this.imgLen;
        let len=this.fil.length+oldLen;
        if(len>20){
          alert('最多可上传20张，您还可以上传'+(20-oldLen)+'张');
          return false;
        }
        for (let i=0; i < this.fil.length; i++) {
          let size = Math.floor(this.fil[i].size / 1024);
          if (size > 5*1024*1024) {
            alert('请选择5M以内的图片！');
            return false
          }
          this.imgLen++;
          this.$set(this.imgs,this.fil[i].name+'?'+new Date().getTime()+i,this.fil[i]);
        }
      },
      getObjectURL(file) {
        let 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('multipartFiles',this.imgs[key],name);
        }
        this.$http.post('/opinion/feedback', this.formData,{
          headers: {'Content-Type': 'multipart/form-data'}
        }).then(res => {
          this.alertShow=true;
        });
      },
    }
  }
</script>

css部分

  .content .case-image{
    justify-content: start;
    align-items: baseline;
  }
  .content .case-image .control-form{
    width: calc(100% - 80px);
    height: auto;
  }
  .content .case-image .control-form p{
    width: 100%;
    font-size: 14px;
    color: gray;
  }
  .content .case-image .control-form .upload-imgs{
    overflow: hidden;
    font-size: 0;
    padding: 0;
  }
  .upload-imgs li{
    position: relative;
    width: 60px;
    height: 60px;
    font-size: 14px;
    display: inline-block;
    margin-right: 25px;
    margin-bottom: 10px;
    border: 2px dashed #ccc;
    text-align: center;
    vertical-align: middle;
  }
  .upload-imgs li:hover{
    /*border-color: red;*/
  }
  .upload-imgs li .upload{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 60px;
    height: 60px;
    z-index: 2;
    opacity: 0;
    cursor: pointer;
  }
  .upload-imgs .add{
    display: flex;
    background-color: #ccc;
    color: #ffffff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 60px;
    height: 60px;
    align-content: space-around;
    flex-wrap: wrap;
    z-index: 1;
  }
  .upload-imgs .add p{
    margin: 0;
  }
  .upload-imgs .add p:before{
    content: '';
    display: block;
    background-size: 100%;
    background-image: url("../../assets/add.png");
    width: 30px;
    height: 30px;
    margin: auto;
  }
  .upload-imgs .img{
    position: relative;
    width: 60px;
    height: 60px;
    line-height: 60px;
    margin: 0;
  }
  .upload-imgs .img img{
    width: 60px;
    height: 60px;
    vertical-align: middle;
  }
  .upload-imgs .img .close{
    display: none;
  }
  .upload-imgs .img .close:hover{
    cursor: pointer;
  }
  .upload-imgs li:hover .img .close{
    display: block;
    position: absolute;
    right: 0px;
    top: -5px;
    line-height: 1;
    font-size: 22px;
    color: #aaa;
  }

备注：灵感来源于 https://www.cnblogs.com/conglvse/p/9524452.html