element-ui upLoad组件使用遇到的问题

upload上传文件,每个文件的上传都会发送一个请求,如果你要多文件上传且只发送一个请求。需要使用JS自己构造formData数据,当然具体上传时的样式效果依旧是组件的upload的,如下:


      
上传xml配置文件 上传excel模板
取 消 确定

点击上传走我们自己封装的方法

 submitUpload() {
      this.fileLoading = true
      const uploadForm = new FormData()
      console.log(this.importFiles)
      this.importFiles.forEach(item =>
        uploadForm.append('files', item.raw)
      )
      uploadfiles(uploadForm).then((res) => {
        this.fileLoading = false
      }).catch(() => {
        this.fileLoading = false
      })
    },
  handleChange(file, fileList) {
      console.log('*********')
      console.log(file)
      const type = file.name.split('.')[1]
      if (this.checkType === '1') {
        if (type !== 'xml') {
          this.$message.warning('请上传xml文件')
          this.fileList = []
          return false
        }
        this.importFiles = fileList
      } else {
        if (type !== 'xls' && type !== 'xlsx') {
          this.$message.warning('请上传excel文件')
          this.fileList = []
          return false
        }
        this.importFiles = fileList
      }
      if (this.importFiles.length === 2) {
        this.isDisabled = false
      } else {
        this.isDisabled = true
      }
      console.log(this.importFiles.length)
    },

具体api官网写的很详细了!

你可能感兴趣的:(Vue)