<a-upload :multiple="true" :before-upload="beforeUpload" :on-remove="handleRemove" :file-list="fileList" :show-upload-list="false" :disabled="fileList.length >= limit" > <a-button class="fbp-btn" style="margin: 4px 6px; padding: 0 13px"> <a-icon type="plus" theme="outlined" /> 图片附件 </a-button> </a-upload> <a-row type="flex" gutter="16"> <a-col v-for="(file, index) in fileList" :key="file.uid" :span="6"> <a-card :body-style="{ padding: '8px' }"> <a-tooltip placement="topLeft" :title="file.name">
</a-tooltip> </a-card> </a-col> </a-row>
</template> <script> export default { data() { return { fileList: [], // 上传文件列表 limit: 3 // 上传文件数量限制 }; }, methods: { // 上传前的处理函数 beforeUpload(file) { // 可以在这里对上传的文件进行处理,例如限制文件类型、大小等 // 如果返回 false,则取消上传 if (this.fileList.length >= this.limit) { this.$message.warning(`上传文件数量不能超过 ${this.limit} 个`); return false; } this.fileList.push(file); return false; // 返回 false,阻止自动上传 }, // 删除文件的处理函数 handleRemove(file, fileList) { this.fileList = fileList; } } }; </script>