1、上傳效果（含新增和刪除設計圖）：

       達到上傳上限，隱藏上傳圖示，刪除後，數量小於上限會自動顯示。

2、html程式碼

//使用前，先把元件引入 
<updatefile :multiple="true" :max=6 :list="imgList" ref="upload"></updatefile>

//multiple:是否支援多選
//max:最多上傳幾張
//list:編輯反顯使用

4、元件程式碼(使用了mint-ui提示 和less前處理器)

<template>
  <div>
    <div class="fileCon">
      <div class="list">
        <div v-for="(item,index) in list" :key="index">
          <div class="close" @click="close(index)"></div>
          <img :src="item" />
        </div>
        <div class="add" v-show="maxStatus" @click="chooseType">
          <div class="add-image"> </div>
        </div>
      </div>
    </div>
    <input id="upload_file" type="file" class="file-input" accept="image/png,image/jpeg,image/jpg" :multiple="multiple" @change="inputChange" style="display: none" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      maxStatus: true
    };
  },
  props: {
    multiple: Boolean,
    max: Number,
    list: Array
  },
  components: {},
  mounted() {},
  methods: {
    chooseType() {
      document.getElementById("upload_file").click();
    },
    close(index) {
      this.list.splice(index, 1);
      this.maxStatus = this.list == this.max ? false : true;
    },
    async inputChange(e) {
      let files = e.target.files;
      let len = this.list.length + files.length;
      if (len > this.max) {
        document.getElementById("upload_file").value = "";
        this.$ui.toast(`最多允許上傳${this.max}張`);
        return;
      }
       
      let uploadAll = [].slice.call(files ,0).map(this.upload);
      //使用object.values(files)，測試安卓存在相容性問題，替換為[].slice.call(files ,0)
       
      this.$ui.loading.open({//上傳中效果，可自行替換。
        text: "上傳中...",
        spinnerType: "fading-circle"
      });
      let result = await Promise.all(uploadAll);
      document.getElementById("upload_file").value = "";
      this.$ui.loading.close();
    },
    upload(file, index) {
      return new Promise(async (resolve, reject) => {
          let form = new FormData();
        form.append("file", file);
        form.append("***");//根據上傳入參新增引數
        let result = await this.post("/file/upload-file", form);
        if (result.cd != 0) {//失敗處理
          this.$ui.toast(`第${index + 1}張(${file.name})上傳出錯(已忽略)`);
          resolve(result);
          return;
        }
        this.list.push(result.data.url);
        if (this.list.length == this.max) {
          this.maxStatus = false;
        }
        resolve(result);
        
      });
    }
  }
};
</script>


 <style lang="less" scoped>
.fileCon {
  width: 100%;
  min-height: 76px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  .list {
    width: 100%;
    min-height: 76px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    & > div {
      width: 50px;
      height: 50px;
      margin: 10px 10px 10px 0;
      position: relative;
      background: #ccc;
      & > img {
        width: 100%;
        height: 100%;
      }
      .close {
        width: 15px;
        height: 15px;
        background-image: url(/images/icon_close.png);
        background-size: 100%;
        position: absolute;
        top: -7px;
        right: -7px;
      }
    }
  }
}
.add-image {
  width: 50px;
  height: 50px;
  background-image: url(/images/addImg.png);
  background-size: 100%;
}
</style>
 

5、獲取元件上傳內容

在父元件提交的時候，獲取上傳元件上傳的圖片內容，獲取為一個數組。 

let picList = this.$refs.upload.list;