原生input实现上传upload功能

这里的例子是，点击按钮，选择多个图片文件后，调用接口上传一个个文件

记得在选择文件之前，清空原来的数据

 var filedata = document.getElementById('picBrowse')
        filedata.value = ''

demo

    <el-button
              v-waves
              class="filter-item import-pic-button"
              type="primary"
              icon="el-icon-import"
              @click="importPic()">导入照片
            </el-button>
            <input
              id="picBrowse"
              ref="picBrowse"
              type="file"
              style="display: none;"
              multiple
              accept=".png,.jpg,.jpeg"
              @change="previewPicFiles($event)">

    // 导入图片
    importPic() {
      var filedata = document.getElementById('picBrowse')
      filedata.value = ''
      this.$refs.picBrowse.click()
    },
    previewPicFiles(e) {
      if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
        this.$message.error('请上传.png/.jpg/.jpeg格式的图片')
        var filedata = document.getElementById('picBrowse')
        filedata.value = ''
        return
      }

      const fileList = Object.values(document.getElementById('picBrowse').files)
      this.resultDlg = true
      this.resultListLoading = true
      fileList.forEach((file, index) => {
        console.log('file:', file)

        var formdata1 = new FormData() // 创建form对象
        formdata1.append('photo', file) // 通过append向form对象添加数据,可以通过append继续添加数据

        picUpload(formdata1).then(response => { // 这里的/xapi/upimage为接口
          this.resultList.push({
            msg: response.data.res,
            name: file.name,
            status: '1' // 失败
          })
        }).catch((err) => {
          this.resultList.push({
            name: file.name,
            msg: err.msg,
            status: '0' // 失败
          })
        }).finally(() => {
          if (index === fileList.length - 1) {
            this.resultListLoading = false
          }
        })
      })
    },