element ui實現自定義上傳檔案-以及解決已上傳檔案列表消失問題
阿新 • • 發佈:2021-01-15
技術標籤:elementvuejsjavascriptvue.js前端html5html
自定義上傳按鈕,非自動上傳,效果圖
action - 就是上傳的介面地址
accept - 是限制上傳檔案格式,設定後只能上傳該格式檔案,
選取-選取按鈕只是選擇了檔案 ,但是並沒有上傳
<el-upload
class="upload-demo inline-block"
:action="commonApi02"
ref="upload02"
: on-preview="handlePreview"
:on-exceed="handleExceed"
:on-success="fileSuccess"
:limit="1"
:on-change="handleChange"
:auto-upload="false"
>
<el-button slot= "trigger" size="small" type="primary" style="margin-left: 5px">
選取
</el-button>
<el-button style="margin-left: 5px" size="small" type="success" @click="submitUpload">
上傳
< /el-button>
// 可以在這裡設定偽檔案列表
</el-upload>
主要是上傳按鈕增加click函式並且 :auto-upload=“false”,請求返回的結果可以通過:on-success屬性,定義函式獲得。函式部分程式碼如下:
// 上傳檔案
submitUpload() {
this.$refs.upload02.submit();
},
handleRemove(file, fileList) {},
handlePreview(file) {},
handleExceed(files, fileList) {
this.$message.warning(
`當前限制選擇 1 個檔案,本次選擇了 ${files.length} 個檔案,共選擇了 ${
files.length + fileList.length
} 個檔案`,
);
},
handleChange(file) { // 這個函式中的程式碼是我的專案中的程式碼 --判斷是否應該隱藏偽檔案列表-移除檔名
// 判斷是否應該顯示偽檔案列表-展示檔名 -我沒有寫在這裡
if (this.isVoluntarilyFlags.inquireFlags) {
this.urlState = false;
this.urlHtml = '';
} else if (this.isVoluntarilyFlags.recordFlags) {
this.urlState = false;
this.urlHtml = '';
}
this.filename = file.name; // 獲取檔名
this.$notify({
title: '選取檔案提示',
message: '選取檔案為暫存檔案,切換訊息型別會清空暫存檔案哦!',
});
this.$notify({
title: '上傳提示',
message: '點選上傳按鈕,即可完成暫存檔案上傳!',
});
},
beforeRemove(file) {
return this.$confirm(`確定移除 ${file.name}?`);
},
fileSuccess(res) {
if (res.status === '0') {
this.$message({
type: 'success',
message: '上傳成功!',
});
this.dialogData.autoSendMessageTaskDO.url = res.data; //這個 res就是上面設定的上傳檔案成功後返回的資料體
} else {
this.$message.error('上傳失敗!');
}
},
在上傳檔案後,或者是選擇了檔案後,會生成一個上傳檔案列表,樣式如圖:
但是在點選上面切換時,已上傳檔案列表,或已選擇上傳檔案列表會消失,解決辦法:寫死一個結構,動態替換檔名
<!-- 偽檔案樣式 -->
<ul v-if="urlState" class="el-upload-list el-upload-list--text">
<li tabindex="0" class="el-upload-list__item is-ready">
<!---->
<a class="el-upload-list__item-name">
<i class="el-icon-document"></i>
{{ urlHtml --這是檔名 }}
</a>
<label class="el-upload-list__item-status-label">
// 這裡可以手動新增關閉按鈕功能
<i class="el-icon-upload-success el-icon-circle-check"></i>
</label>
<i class="el-icon-close"></i>
<i class="el-icon-close-tip"></i>
</li>
</ul>
elementui遇到的一些其他問題解決辦法:傳送門