ui部分

<el-upload
        ref="upload"
        drag
        :file-list="fileList"
        :auto-upload="false"
        :on-change="onchange"
        :on-remove="handleRemove"
        action="javascript:void(0)"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
      </el-upload>

js 實現(xiàn)上傳文章來源地址http://www.zghlxwxcb.cn/news/detail-617406.html

// 上傳函數(shù)
handleUpload() {
      const formData = new FormData()
      // fileList 在data中定義的數(shù)組，把所有文件放到formData中
      this.fileList.forEach((f) => {
        formData.append('file', f.raw)
      })
      // 上傳文件 api 【createFileRequest是自己封裝的一個接口】
      createFileRequest(formData)
        .then((res) => {
          this.msgSuccess('文件上傳成功')
          this.fileList = []
        })
        .catch((e) => {
          this.msgError('文件上傳失敗')
        })
    },
    onchange(file) {
      if (file.size / 1024 / 1024 < 100) {
        this.fileList.push(file)
      } else {
        this.msgError('文件過大')
        this.handleRemove(file)
      }
    },
    // 文件刪除處理
    handleRemove(file) {
      this.fileList = this.fileList.filter((f) => file.name !== f.name)
    }

到了這里，關(guān)于element ui ---- el-upload實現(xiàn)手動上傳多個文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！