element ui 自定义上传 el-upload

最新推荐文章于 2025-03-31 09:50:52 发布

redlevin

最新推荐文章于 2025-03-31 09:50:52 发布

阅读量271

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/redlevin/article/details/119639196

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

<el-upload ref="voucherUpload" action="#" accept="image/jpeg,image/gif,image/png"
							:http-request="onUploadImageRequest"
							:on-remove="onUploadRemove"
							:on-success="onUploadSuccess"
							:before-upload="voucherBeforeUpload">
							<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
							<div slot="tip" class="el-upload__tip">
								<div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb </div>
							</div>
						</el-upload>

onUploadSuccess(file, fileList) {
				this.payOrderModel.voucherFileList = fileList.map((item) => {
					let name = item.response.name,url = item.response.url;
					return {name,url};
				})
			},
			onUploadRemove(file, fileList){
				this.payOrderModel.voucherFileList = fileList.map((item) => {
					let name = item.response.name,url = item.response.url;
					return {name,url};
				})
			},
			onUploadImageRequest(param) {
				const formData = new FormData()
				let fileName = param.file.name;
				formData.append('voucher', param.file)
				FinanceOrderService.uploadVoucher(formData).then(response => {
					this.fileLoading.close();
					param.onSuccess({name: fileName, url: response.imgUrl});
				}).catch(response => {
					param.onError()
					this.fileLoading.close();
				})
			},

voucherBeforeUpload(file) {
				const acceptType = ['png','gif','jpg','jpeg']
				const FILE_SIZE = 500 * 1000 ;
				const maxUploadCount = 2;
				if(this.payOrderModel.voucherFileList.length >= maxUploadCount){
					this.$message.error(`最多只能上传 ${maxUploadCount} 个文件!`);
					return false;
				}
				let fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);

				let isImage = acceptType.some((item) => {
					return fileExtension.toLowerCase() == item;
				})
				if (!isImage){
					this.$message.error(`文件格式不正确, 请上传 jpg/gif/png 图片格式文件!`);
					return false;
				}
				if(file.size > FILE_SIZE) {
					this.$message.error(`上传文件不能超过 500K`);
					return false;
				}
				this.fileLoading = this.$loading({
					lock: true,
					text: "上传中",
					background: "rgba(0, 0, 0, 0.7)",
				});
				return true;
			},