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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<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>