vue解决upload组件第二次上传无反应_el-upload上传一次后再点没反应

问题描述：

附件上传组件名： Accessory

组件内容： 为方便更多页面调用该组件进行附件上传。

问题详述： 父级页面为编辑页面调用该组件，在点击编辑按钮后上传附件，第一次上传成功，提交后在其他行再次点击编辑按钮，调用该组件，则显示上传失败。

解决关键：

• 第一次附件上传后el-upload中的file没有清空。
• 我们在附件的组件中为el-upload添加ref属性，并增加方法clearFiles，代码如下：

 clearFiles(){
      this.$refs.upload.clearFiles();
    }
1
2
3

• 在父级页面，调用该组件：关键点： ref="Accessory" ，@clearFiles="clearFiles"

 <Accessory
            ref="Accessory"
            :dataForm="dataForm"
            :Attachment="Attachment"
            @clearFiles="clearFiles"
            @DeleteAttachment="move_secerurl_filename_update"
            @beforeUpload="beforeAvatarUpload_secerurl_update"
            @DownloadAttachment="download_secerurl(edit_certificateForm.url)"
            @handleSuccess="handleSuccess_secerurl_edit"
          >
          </Accessory>
1
2
3
4
5
6
7
8
9
10
11

• 编辑该方法

 clearFiles(){
      this.$refs.Accessory.clearFiles()
    },
1
2
3

• 在附件上传完成后或编辑提交成功后调用该方法：this.clearFiles();

 // 更新证书
    updateCertification() {
      this.edit_certificateForm.welderid = this.dataForm.id;
      this.edit_certificateForm.welder = this.dataForm.weldername;
      this.$refs["edit_certificateFormRef"].validate(valid => {
        if (valid) {
          this.$api.welderQualification
            .save(this.edit_certificateForm)
            .then(res => {
              if (res.code == 200) {
                this.$message({ message: "操作成功", type: "success" });
                this.edit_dialogVisible = false;
                this.doRefreshCertifications(
                  this.edit_certificateForm.welderid
                );
                this.Attachment="";
                this.clearFiles();
              } else {
                this.$message({
                  message: "操作失败, " + res.msg,
                  type: "error"
                });
              }
            });
        }
      });
    },
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

组件代码：

<template>
  <div>
    <strong v-if="show_maintain">
      <p style="color: #3d7878; font-size: 16px; margin: 20px">
        <strong style="font-size: 20px">|</strong>
        &nbsp;&nbsp;附件维护
      </p>
    </strong>
    <strong v-if="!show_maintain">
      <p style="color: #3d7878; font-size: 16px; margin: 20px">
        <strong style="font-size: 20px">|</strong>
        &nbsp;&nbsp;证书附件
      </p>
    </strong>
    <table
      width="90%"
      border="1"
      bordercolor="#E4E7ED"
      cellpadding="10px"
      cellspacing="0"
      style="margin-left: 8%"
    >
      <tr height="35px">
        <th>附件名</th>
        <th>资料名</th>
        <th>操作</th>
      </tr>
      <tr height="50px">
        <td width="10%" align="center">附件</td>
        <td width="42%" align="center">
          <el-tooltip
            class="item"
            effect="light"
            content="点击下载"
            placement="bottom"
          >
            <el-link
              type="primary"
              @click="DownloadAttachment"
              v-if="Attachment"
              >资料附件
            </el-link>
          </el-tooltip>
        </td>
        <td width="26%" align="center">
          <el-upload
            ref="upload"
            style="float: left; margin-left: 10%"
            align="center"
            :limit="1"
            :action="baseUrl + '/upLoad/annex'"
            :show-file-list="false"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
          >
            <el-button plain size="mini">上传</el-button>
          </el-upload>
          <el-button
            style="float: left; margin-left: 10%"
            plain
            type="danger"
            size="mini"
            @click="DeleteAttachment"
          >
            删除
          </el-button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { baseUrl } from '@/utils/global.js'
import { imageRemoteUrl } from '@/utils/global.js'
export default {
  name: "Accessory",
  components: {},
  props: {
    dataForm: {
      type: Object
    },
    Attachment: {
      type: String
    },
    //显示维护界面时，描述是“附件维护”，在证书新增编辑界面，显示“证书附件”
    show_maintain: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      baseUrl: baseUrl,
      imageRemoteUrl: imageRemoteUrl,
    };
  },
  created() { },
  methods: {
    handleSuccess(res) {
      this.$emit("handleSuccess", res);
    },
    handlePreview(file) {
      this.$emit("handlePreview", file);
    },
    beforeUpload(file) {
      this.$emit("beforeUpload", file);
    },
    DeleteAttachment() {
      this.$emit("DeleteAttachment");
    },
    DownloadAttachment(file) {
      this.$emit("DownloadAttachment", file);
    },
    clearFiles(){
      this.$refs.upload.clearFiles();
    }
  },
  watch: {
    Attachment() { }
  }
};
</script>
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123