上傳前：
? ? ? ? ? ? ? ?
回顯：可以刪除?
?最近做了一個后臺管理系統(tǒng)使用的是 Ant Design和vue框架搭建的
文件上傳：組件:? Ant Design? ?https://1x.antdv.com/components/upload-cn/? (upload 官方文檔)
功能需求：1.可以拖拽，或者點擊上傳文件? 2.只能上傳單個文件，不能上傳多個文件。3.導入文件只能是 xls、xlsx格式 4.文件大小不能超過10M? ? 5.點擊取消，如果當前有文件正在上傳，提示? ? ? ? ? ? ? ? ? ? ?用戶，沒有的話，關閉彈窗
具體思路：1.點擊文件上傳之前判斷文件的格式/大小符合條件展示，不符合條件提示用戶。2.點擊確定時，判斷文件是否存在，后端需要接受的參數是 formData數據，對文件進行處理。調用接? ? ? ? ? ? ? ? ? ? ?口，成功后，更新數據，不成功，提示用戶。3.點擊取消，如果當前有文件正在上傳，提示用戶，沒有的話，關閉彈窗
注意事項：1.因為antd upload 上傳多個文件自帶remove 回調函數，但是如果fileList 只有一個文件時，需要自己調用remove 回調函數，否則，上傳文件后的刪除按鈕失效。
? ? ? ? ? ? ? ? ? 2.因為我的需求是只能上傳一個文件，所以在上傳文件之前，不僅要判斷格式，還要限制fileList中只能有一個數據，那么也就是后傳的文件，要覆蓋先傳的文件。
? ? ? ? ? ? ? ? ? 3.因為是我自己封裝的組件，需要注意父子組件傳遞數據的問題~~~~~
接下來上代碼。
HTML部分
<template>
? <div class="dialog">
? ? <a-modal :visible="visible1" :confirmLoading="loading1" width="20%" :title="title1 === 'batch' ? '推廣' : ''" centered
? ? ? @cancel="() => { $emit('cancelBatch',fileList) }" @ok="() => { $emit('okBatch', fileList) }">
? ? ? <div>
? ? ? ? <span style="margin-right: 20px; margin-bottom: 10px;display: inline-block;">導入模板</span>
? ? ? ? <a :href='template' @click="downLoad">下載</a>
? ? ? </div>
? ? ? <a-upload-dragger name="file" :before-upload="handleBeforeUpload" :file-list="fileList" ?:remove="handleTableRemove">
? ? ? ? <p class="ant-upload-drag-icon">
? ? ? ? ? <a-icon type="inbox" />
? ? ? ? </p>
? ? ? ? <p class="ant-upload-text">
? ? ? ? ? 點擊或將文件拖拽到這里上傳
? ? ? ? </p>
? ? ? ? <p class="ant-upload-hint">
? ? ? ? ? 支持擴展名：.xlsx .xls
? ? ? ? </p> ? ?
? ? ? </a-upload-dragger>
? ? </a-modal>
? </div>
</template>Script部分
?
?
?//刪除icon??
? ? handleTableRemove: function (file) {
? ? ? const index = this.fileList.indexOf(file);
? ? ? const newFileList = this.fileList
? ? ? newFileList.splice(index, 1);
? ? ? this.fileList = newFileList;
? ? },
? ? handleBeforeUpload: function (file, fileList) {
? ? ? this.file = file
? ? ? console.log(file, fileList);
? ? ? //判斷文件大小
? ? ? const isLt10M = file.size / 1024 / 1024 < 10
? ? ? if (!isLt10M) {
? ? ? ? this.$message.error(file.name + '文件大小超出限制，請修改后重新上傳')
? ? ? ? return false
? ? ? }
? ? ? //判斷上傳文件格式
? ? ? let extension = file.name.split('.')[1] === 'xls';
? ? ? let extension2 = file.name.split('.')[1] === 'xlsx';
? ? ? if (!extension && !extension2) {
? ? ? ? this.$message.warning('導入文件只能是 xls、xlsx格式!');
? ? ? ? return false
? ? ? }
? ? ? this.fileList = [...this.fileList, file];
? ? ? //限制文件只能上傳一個
? ? ? this.fileList = this.fileList.slice(-1);
? ? ? return false
? ? },
?
?點擊確認
okBatch(fileList) {
? ? ? if (fileList.length > 0) {
? ? ? ? // file 是上傳的文件
? ? ? ? // 后端需要接受的參數是 formData數據，
? ? ? ? const form = new FormData()
? ? ? ? form.append('file', fileList[0])
? ? ? ?//點擊確定后先讓確定按鈕loading
? ? ? ? this.confirmLoading1 = true
? ? ? ? importTask(form).then((res) => {
? ? ? ? ? if (res.code === 2000) {
? ? ? ? ? ?//上傳成功后取消loading
? ? ? ? ? ? this.confirmLoading1 = false
? ? ? ? ? ? this.visible1 = false
? ? ? ? ? ? this.$message.info(res.message)
? ? ? ? ? ? //重置列表數據
? ? ? ? ? ? this.handleReset()
? ? ? ? ? } else if (res.code === 5000) {
? ? ? ? ? ? this.$message.error(res.message)
? ? ? ? ? ? this.confirmLoading1 = false
? ? ? ? ? } else {
? ? ? ? ? ? this.$message.error(res.message)
? ? ? ? ? ? this.confirmLoading1 = false
? ? ? ? ? }
? ? ? ? })
? ? ? } else {
? ? ? ? this.$message.error('您還沒有上傳文件！')
? ? ? }
? ? },點擊取消
?cancelBatch() {
? ? ? ? if (!this.confirmLoading1) {
? ? ? ? ? this.visible1 = false
? ? ? ? } else {
? ? ? ? ? this.$message.error('您正在上傳文件!')
? ? ? ? }
? ? },具體就是這樣完成的。文章來源：http://www.zghlxwxcb.cn/news/detail-628986.html
寫的比較菜，有問題歡迎在評論區(qū)提出討論，謝謝！文章來源地址http://www.zghlxwxcb.cn/news/detail-628986.html
到了這里，關于Ant Design upload 文件上傳 限制文件只能上傳一個的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
