element:upload上传附件:删除

<el-upload class="upload-demo" action="#" :file-list="fileList" :before-upload="uploadFile" :on-remove="handleRemove" multiple>
	<el-button size="small" type="primary" style="margin-top: 10px">点击上传</el-button>
	<div slot="tip" class="el-upload__tip">支持扩展名:.rar .zip .doc .docx .pdf .jpg .png
	</div>
</el-upload>

upURL是上传成功之后调用的接口

uploadFile: function(file) {
	var _this = this;
	var len = file.name.split('.').length;
	const isRightType = (file.name.split('.')[len - 1] === 'doc') || (file.name.split('.')[len - 1] === 'docx') ||
		(file.name.split('.')[len - 1] === 'pdf') || (file.name.split('.')[len - 1] === 'rar') ||
		(file.name.split('.')[len - 1] === 'zip') || (file.name.split('.')[len - 1] === 'jpg') ||
		(file.name.split('.')[len - 1] === 'png');
	const isLt2M = file.size / 1024 / 1024 < 2;
	if (!isLt2M) {
		this.$message.error('上传文件大小不能超过 2MB!');
		return;
	} else if (!isRightType) {
		this.$message.error('上传文件的类型不正确!');
		return;
	} else { //可以上传
		var fd = new FormData();
		fd.append('file', file);
		fd.append('businessType', 'file-type');
		fd.append('businessId', file.uid);
		// ajax请求
		/* 
		 ajax请求里面加上以下代码
		 */
		if (result.state == "0") {
			_this.fileList.push({
				name: '',
				uid: fd.get('businessId')
			});
			delBugImg(_this.fileList, 'file-type', fd.get('businessId'));
			_this.$message.error("上传失败的原因");
			return
		} else {
			_this.$message('上传成功');
			_this.fileList.push({
				name: file.name,
				url: upURL+"?fileId=" + result.id
			});
		}
	}
},
/*
 @handleRemove 删除已上传成功的附件
 file.uid  附件的id
 'file-type' 对应上传时写的'businessType'
 */
handleRemove: function(file, fileList) { //删除附件
	delImg(fileList, 'file-type', file.uid, file.url.substring(file.url.indexOf("=") + 1, file.url.length));
},

下面是封装的js删除upload上传附件:
URL是与删除附件的接口

/* 
 URL :删除附件的接口
 businessType:删除附件的类型
 businessId:删除附件的id
 fileList:上传的时候push到这个数组中
 fileIds=file.uid, file.url.substring(file.url.indexOf("=") + 1, file.url.length)
 */
//删除有问题的附件
function delBugImg(fileList, businessType, businessId) {
	$.ajax({
		url: URL,
		type: "get",
		data: {
			businessType: businessType,
			businessId: businessId,
		},
		success: function(res) {
			for (var i = 0; i < fileList.length; i++) {
				if (fileList[i].uid == Number(businessId)) {
					fileList.splice(i, 1);
				}
			}
		}
	})
}

//删除附件
function delImg(fileList, businessType, businessId, fileIds) {
	$.ajax({
		url: URL,
		type: "get",
		data: {
			businessType: businessType,
			businessId: businessId,
			fileIds: fileIds
		},
		success: function(res) {
			for (var i = 0; i < fileList.length; i++) {
				var url = fileList[i].url;
				if (url.indexOf(fileIds) != -1) {
					fileList.splice(i, 1);
					return;
				}
			}
		}
	})
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-uploadElement UI 中的一个组件,用于文件上传。它支持单个文件上传和批量文件上传。批量上传时,可以选择多个文件,也可以拖动多个文件一起上传。同时,el-upload 也提供了多种事件和方法,方便我们在上传过程中进行相关操作,如上传前的校验、上传成功后的回调等。 以下是 el-upload 批量上传文件的使用方法: 1. 在 Vue 组件中引入 el-upload 组件: ``` <template> <el-upload class="upload-demo" action="/upload" :multiple="true" :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeUpload"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> </template> <script> export default { methods: { // 上传前的校验 beforeUpload(file) { const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'; const isLt500K = file.size / 1024 < 500; if (!isJPG) { this.$message.error('上传头像图片只能是 JPG/PNG 格式!'); } if (!isLt500K) { this.$message.error('上传头像图片大小不能超过 500KB!'); } return isJPG && isLt500K; }, // 预览文件 handlePreview(file) { console.log('预览', file); }, // 删除文件 handleRemove(file, fileList) { console.log('删除', file, fileList); } } } </script> ``` 2. 通过设置 `:multiple="true"` 来开启批量上传功能; 3. 可以通过 `:before-upload` 方法来实现上传前的校验,并在校验失败时给出错误提示; 4. 可以通过 `:on-preview` 方法来实现预览文件功能; 5. 可以通过 `:on-remove` 方法来实现删除文件功能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值