el-upload上傳元件(隱藏上傳按鈕/隱藏檔案刪除標記)
阿新 • • 發佈:2021-09-17
<template> <el-upload ref="uploadFile" :class="[showUploadBtn ? '' : 'hidden-Btn']" //是否隱藏點選上傳的按鈕 :disabled="!showUploadBtn" //是否隱藏檔案刪除標記 action="#none" :http-request="uploadSectionFile" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :on-change="fileChange" :auto-upload="false" multiple :on-exceed="handleExceed" :file-list="fileList" > <el-button size="small" type="primary">點選上傳</el-button> </el-upload> </template> <script> export default { name:"UploadFiles", props: { files: { type: Array, default: () => [], }, /*是否顯示上傳檔案按鈕、是否顯示檔案刪除×號*/ showUploadBtn: { type: Boolean, default: true, }, }, data() { return { fileList: this.files, }; }, methods: { handleRemove(file, fileList) { console.log(file, fileList);// 改變檔案列表 this.fileList = fileList; }, handlePreview(file) { console.log("handlePreview:", file); if (file.url) { window.open(file.url); } }, handleExceed(files, fileList) { this.$message.warning( `當前限制選擇 3 個檔案,本次選擇了 ${files.length} 個檔案,共選擇了 ${ files.length + fileList.length } 個檔案` ); }, beforeRemove(file, fileList) { return this.$confirm(`確定移除 ${file.name}?`); }, // param是自帶引數。 // this.$refs.uploadFile.submit()會自動呼叫 httpRequest方法.在裡面取得file uploadSectionFile(param) { var fileObj = param.file; // FormData 物件 var form = new FormData(); // 檔案物件 form.append("file", fileObj); console.log("dfdg:"); console.log(form); let arr = []; this.fileList.forEach((element) => { let formData = new FormData(); formData.append("file", element); arr.push(formData); }); }, // fileList 是檔案列表發生變化後,返回的修改後的列表物件,這裡直接賦值 fileChange(file, fileList) { console.log(file.raw); // 改變檔案列表 this.fileList = fileList; }, }, }; </script> <style scoped lang="scss"> .hidden-Btn { /deep/ .el-upload { display: none; } } </style>