Element-ui 实现一次上传多个文件

实现的效果：

1. 可以传多张图片，上传后图片依然显示在框内，限制上传两张，上传两张图片后，上传框消失，当删除一张图片后，上传框重新显示。
2. 一次上传多张图片，element-ui的上传多张原实现效果为分多次请求，我们这里自定义了一个上传方法完成该效果。

大致步骤：

1. 设置:auto-upload="false"
2. 添加:http-request="uploadFile"
3. 添加属性fileData: ''
4. 添加方法uploadFile (file) { this.fileData.append("file",file.file) },
5. 添加方法submitUpload ()

详细代码如下：

<template>
  <el-container>
    <el-header>
        <tr style="font-size: 18px;">
          <td>标题</td>
        </tr>
    </el-header>
    <el-main>
        标题
        <el-divider></el-divider>
          <el-upload
            ref="upload"
            action="http://localhost:8080/OneToOne"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :limit=2
            :class="{ disabled: uploadDisabled }"
            :file-list="fileList"
            :on-success="handleSuccess"
            :on-error="handleSuccess"
            :on-change="handleChange"
            :auto-upload="false"
            :http-request="uploadFile"
            :multipart="multipart"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        <!-- <el-button plain disabled>查看对应相似度</el-button> -->
        <el-button plain type="success" size="small" @click="submitUpload" style="margin-top:20px">查看对应相似度</el-button>
        <el-divider></el-divider>
    </el-main>
  </el-container>
</template>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// import $ from 'jquery'
import axios from 'axios';
export default {
  data () {
    return {
        dialogImageUrl: '',
        dialogVisible: false,
        uploadDisabled: false,
        fileList: [],
        dialogTableVisible: false,
        fileData: '',
        multipart: true
    }
  },
  methods: {
    uploadFile (file) {
      this.fileData.append("file",file.file)
    },
    submitUpload () {
      this.fileData = new FormData()
      this.$refs.upload.submit()
      axios.post('http://localhost:8080/OneToOne', this.fileData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        console.log(res)
      }).catch(res => {
        console.log(res)
      })
    },
    handleChange (file, fileList) {
      if (fileList.length >= 2) {
          this.uploadDisabled = true
      }
    },
    handleRemove (file, fileList) {
        this.uploadDisabled = false
    },
    handlePictureCardPreview (file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
    },
    handleSuccess (response, file, fileList) {
      console.log(response)
      this.$alert('相似度为' + response['pair_verify_similarity'], '经过对比', {
          confirmButtonText: '确定',
          callback: action => {
          }
      })
    }
  }
}
</script>

<style>
  .disabled .el-upload--picture-card {
      display: none !important;
  }
</style>

最后

以上就是激昂小兔子为你收集整理的Element-ui 实现一次上传多个文件的全部内容，希望文章能够帮你解决Element-ui 实现一次上传多个文件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。