從Element UI 的官方文檔中，?Upload 上傳組組件提供了on-remove和before-remove的文件刪除的鉤子屬性（回調(diào)方法名），但如何調(diào)用組件刪除方法（讓該方法刪除本地上傳文件列表以及觸發(fā)這兩個鉤子）并無相關說明。

在不定義file插槽(slot)的情況下，通過UI點擊控件文件列表上文件的叉標簽(X)，控件的封裝內(nèi)部會為我們觸發(fā)相應的before-remove鉤子、刪除組件列表中對應文件信息、on-remove鉤子(一般此處調(diào)用后臺去刪除服務端對應文件)等調(diào)用，但在我們需要自定義文件列表的模板的情況下，我們需要集成文件刪除的操作（包括保持讓before-remove鉤子、on-remove鉤子也像從默認UI的叉標簽X刪除的情況那樣同樣生效），而官方文檔并沒有說明刪除操作的API：

官方文檔中的例子如下，下載（實現(xiàn)相對簡單）、刪除操作并無具體舉例說明：

?

??沒辦法，只好分析該組件的源代碼：

https://unpkg.com/browse/element-ui@2.15.13/packages/upload/src/index.vue

https://unpkg.com/browse/element-ui@2.15.13/packages/upload/src/upload.vue

https://unpkg.com/browse/element-ui@2.15.13/packages/upload/src/index.vue

?根據(jù)源碼可知，刪除操作是通過組件內(nèi)部的upload子組件(ref為“upload-inner”)調(diào)用onRemove回調(diào)方法實現(xiàn)的，而該子組件的onRemove回調(diào)方法實際引用的是上層組件(el-upload本身)的handleRemove方法；

因此，我們使用el-upload組件可以有以下方法來調(diào)用刪除文件的操作以觸發(fā)相應的before-remove鉤子、從組件的列表刪除對應文件、on-remove鉤子：

(假設該el-upload組件ref="upload_attach")

1. $refs.upload_attach.$refs['upload-inner'].onRemove(file);
2. $refs.upload_attach.handleRemove(file)

?

<el-upload ref="upload_attach" :file-list="editForm.AttachFileInfos" drag list-type="picture-card" multiple :limit="maxUpload" :on-exceed="handleExceed"
           :action="uploadUrl" :auto-upload="autoupload" @*:headers="headers"*@ :data="uploadParam" :on-change="handleChange1"
           :on-success="uploadSuccess1" @*:on-preview="previewPic"*@ :on-remove="removeAttachFile1" :before-remove="beforeRemove" :class="{hideUnload:notAttachUploader}">
    @*<em class="el-icon-plus"></em>*@
    <em class="el-icon-upload"></em>
    <div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>

    <div slot="file" slot-scope="{file}">
        @*<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">*@
        <span>{{file.name}}</span>
        <span class="el-upload-list__item-actions">
            @*<span class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
            </span>*@
            <span class="el-upload-list__item-delete"
                  @@click="handleDownload(file)">
                <i class="el-icon-download"></i>
            </span>
            <span class="el-upload-list__item-delete"
                  @@click="$refs.upload_attach.$refs['upload-inner'].onRemove(file);"
          @*或者：@@click="$refs.upload_attach.handleRemove(file);"*@
            >
                <i class="el-icon-delete"></i>
            </span>
        </span>
    </div>
</el-upload>


handleDownload: function (file) {
    var link = document.createElement("a");
    link.setAttribute("href", file.url);
    link.setAttribute("download", file.name);
    link.setAttribute("target", "_blank");
    link.setAttribute("display", "none;");
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
},

運行效果：

文章來源地址http://www.zghlxwxcb.cn/news/detail-684518.html

到了這里，關于el-upload調(diào)用內(nèi)部方法刪除文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！