element ui 自定义上传 el-upload

<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;
			},

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好,关于 element-ui 的上组件 el-upload,您可以通过自定义 el-upload-list 来实现自定义列表的功能。 具体实现方法如下: 1. 在 el-upload 组件中添加属性 list-type="picture-card",并设置属性 action 为上文件的地址。 2. 在 el-upload 组件中添加自定义 slot,用于自定义列表的显示。 3. 在自定义的上列表组件中,使用 el-upload-list 组件来展示上文件的列表。 4. 可以通过监听 el-upload 组件的 change 事件来获取上的文件信息,并将上的文件信息递给自定义的上列表组件,以展示上文件的列表。 以下是一个简单的示例代码: ```html <template> <div> <el-upload class="upload-demo" action="/upload" list-type="picture-card" :on-change="handleChange" > <i class="el-icon-plus"></i> <div class="upload-text">上图片</div> </el-upload> <custom-upload-list :file-list="fileList"></custom-upload-list> </div> </template> <script> import CustomUploadList from './CustomUploadList.vue'; export default { components: { CustomUploadList, }, data() { return { fileList: [], }; }, methods: { handleChange(file, fileList) { this.fileList = fileList; }, }, }; </script> ``` CustomUploadList.vue 组件的代码如下: ```html <template> <el-upload-list class="custom-upload-list" :file-list="fileList"> <template slot-scope="{file}"> <div class="custom-list-item"> <img :src="file.url" class="custom-list-item-thumbnail"> <div class="custom-list-item-name">{{ file.name }}</div> <div class="custom-list-item-actions"> <el-button size="small" type="text" @click="handleRemove(file)">删除</el-button> </div> </div> </template> </el-upload-list> </template> <script> export default { props: { fileList: { type: Array, default: () => [], }, }, methods: { handleRemove(file) { const index = this.fileList.indexOf(file); if (index !== -1) { this.fileList.splice(index, 1); } }, }, }; </script> ``` 希望这个示例能够帮助到您。如果您有任何问题,请随时提出。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值