使用 input 标签实现按顺序批量上传文件/图片

input 标签在上传中的应用， 这里只记录一下代码，过程和来源参见https://gitbook.cn/books/5db103ad74b4750ec7a3d2bb/index.html

<div>
  <button class="avatar-input" >
    <i class="el-icon-plus"></i>
    <input
      style="opacity:0;width:100%;height:100%;position:absolute;top:0;left:0"
      @change="uploadSuccess"
      multiple="multiple"
      accept="image/jpeg, image/jpg, image/png"
      type="file"
      ref="referenceUpload"
      class="avatar-input"
    >
  </button>
</div>

<script>
  export default {
    data() {
      return {
        ruleForm: {
         productImages: []
        },
      };
    },
    methods: {
        uploadSuccess (e) { 
            const that = this
            const getImages = async _ => {
              let f = function (i) {
                let formData = new FormData()
                formData.append('file', e.target.files[i])
                return uploadImg(formData, 'proimg').then((res) => {
                  that.ruleForm.productImages.push({res.data})
                }).catch(err => {
                  console.log(err)
                })
              }
              for (let i = 0; i < e.target.files.length; i++) { // 不能用forEach,有关资料可以自行上网查询一下
                await f(i)
              }
              this.$refs.referenceUpload.value = null // 关键,每次上传成功之后去除临时区的东西
            }
            getImages()
          },
       }
  }
</script>