vue 使用<input type="file">上传图片、预览、删除

最近碰到了使用上传文件，发现vue-upload不怎么好用，网上找了好用的例子，记录一下
转自https://www.cnblogs.com/conglvse/p/9524452.html

vue 上传图片、预览、删除

使用原生<input type="file">上传图片、预览、删除；multiple实现可上传多张

参数名	类型	说明
fileTypes	Array	文件类型， 默认'jpeg','bmp','gif','jpg'
limit	Number	限制数量，默认5
size	Number	最大图片大小，默认5M
@imgs	Object	上传的图片文件

html部分

<template>
    <div class="form-group">
      <label class="control-label">上传图片</label>
      <div class="control-form">
        <p class="help-block">(建议图片格式为：JPEG/BMP/PNG/GIF，大小不超过5M，最多可上传4张)</p>
        <ul class="upload-imgs">
          <li v-if="imgLen>=4 ? false : true">
            <input type="file"
                   class="upload"
                   @change="addImg"
                   ref="inputer"
                   multiple
                   accept="image/png,image/jpeg,image/gif,image/jpg" />
            <a class="add"><i class="iconfont icon-plus"></i>
              <p>点击上传</p>
            </a>
          </li>
          <li v-for='(value, key) in imgs'>
            <p class="img"><img :src="getObjectURL(value)"><a class="close"
                 @click="delImg(key)">×</a></p>
          </li>
        </ul>
      </div>
    </div>
</template>

js部分

<script>
  export default {
    data() {
      return {
        formData:new FormData(),
        imgs: {},
        imgLen:0,
      }
    },
    methods: {
      addImg(event){
        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 > 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) {
        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('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部分

<style scoped>
.upload-imgs {
  margin: 10px 0 30px 0;
  overflow: hidden;
  font-size: 0;
}
.upload-imgs li {
  position: relative;
  width: 118px;
  height: 118px;
  font-size: 14px;
  display: inline-block;
  padding: 10px;
  margin-right: 25px;
  border: 2px dashed #ccc;
  text-align: center;
  vertical-align: middle;
}
.upload-imgs li:hover {
  border-color: $them-color;
}
.upload-imgs .add {
  display: block;
  background-color: #ccc;
  color: #ffffff;
  height: 94px;
  padding: 8px 0;
}
.upload-imgs .add .iconfont {
  padding: 10px 0;
  font-size: 40px;
}
.upload-imgs li:hover .add {
  background-color: $them-color;
}
.upload-imgs li .upload {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 118px;
  height: 118px;
}
.upload-imgs .img {
  position: relative;
  width: 94px;
  height: 94px;
  line-height: 94px;
}
.upload-imgs .img img {
  vertical-align: middle;
}
.upload-imgs .img .close {
  display: none;
}
.upload-imgs li:hover .img .close {
  display: block;
  position: absolute;
  right: -6px;
  top: -10px;
  line-height: 1;
  font-size: 22px;
  color: #aaa;
}
</style>