AntDesign文件上传前端文件类型控制 不采用Upload.IGNORE来限制出现在upload_list中

<a-form-item
				label="附件"
				:label-col="{ span: 4 }"
				:wrapperCol="{ span: 4 }"
				:colon="false"
			>
				<div class="upload">
					<a-upload
						:fileList="uploadFileList"
						name="file"
						:multiple="true"
						action="/task/attachment/upload"
						:headers="headers"
						:before-upload="handleBeforeUpload"
						@change="handleChange"
						method="post"
						accept=".doc, .docx, .xls, .xlsx, .pdf"
					>
						<a-button> <a-icon type="upload" />上传附件</a-button>
					</a-upload>
				</div>
				<div class="description">* 选择本地文件上传(仅支持word、excel、pdf类型文件)</div>
			</a-form-item>




		handleBeforeUpload(file){
			console.log('output-> extName', file.name.split('.')[1])
			if(!('doc,docx,xls,xlsx,pdf'.includes(file.name.split('.')[1]))) {
				this.$message.warning('仅支持word、excel、pdf类型文件')
				return false;
			}
			return true;
		},
		handleChange(info) {
			this.uploadFileList = [...info.fileList]
			if(!('doc,docx,xls,xlsx,pdf'.includes(info.file.name.split('.')[1]))) {
				this.uploadFileList = this.uploadFileList.filter(item => {
					if(('doc,docx,xls,xlsx,pdf'.includes(item.name.split('.')[1]))) {
						return item;
					}
				})
				return
			}
			if (info.file.status !== 'uploading') {
			}
			if (info.file.status === 'done') {
				console.log('output-> this.uploadFileList::: ★', this.uploadFileList)
				this.dataParams.attachments = this.uploadFileList.map(item => item.response.data.id)
				// this.dataParams.attachments.push(info.file.response.data.id);
				this.$message.success(`${info.file.name} 上传成功!`);
			} else if (info.file.status === 'error') {
				this.$message.error(`${info.file.name} 上传失败!`);
			}
		}
posted @ 2024-01-16 14:53  Felix_Openmind  阅读(427)  评论(0)    收藏  举报
*{cursor: url(https://files-cdn.cnblogs.com/files/morango/fish-cursor.ico),auto;}