EleentUI 多文件同时上传

最新推荐文章于 2024-05-22 11:23:12 发布

COOLWTUU2

最新推荐文章于 2024-05-22 11:23:12 发布

阅读量194

点赞数

分类专栏： Vue 文章标签： vue elementui

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html:

  <el-upload
      class="upload-demo"
      ref="upload"
      action="string"
      multiple
      :limit="2"
      accept=".sqlite,.xml"
      :before-upload="beforeUpload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :http-request="uploadFile"
      :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传&新建</el-button>
    </el-upload>
    <el-progress v-show="process > 0" :percentage="process" style="width: 80%;"></el-progress>

Js:

submitUpload () {
      this.fileData = new FormData();
      this.$refs.upload.submit();
      let config = {
        //添加请求头
        headers: { "Content-Type": "multipart/form-data" },
        onUploadProgress: (progressEvent) => {
            // 使用本地 progress 事件
            if (progressEvent.lengthComputable) {
                let num = Math.round((progressEvent.loaded / progressEvent.total) * 100)
                this.process = num // 使用某种 UI 进度条组件会用到的百分比
            }
        }
      };
      axios.post(/api/Quota/NewSysQuotaLib', this.fileData, config).then(response=>{
        
      }).catch(response=>{
       
      })
},
uploadFile:function(file){
    this.fileData.append('file', file.file);
},