关于layui拖拽上传图片后再次进行上传的问题

关于layui拖拽上传图片后再次进行上传的问题

思路
给页面中相应的标签三次使用upload.render(),因为上传前上传后页面显示的内容不一样，上传前显示的是官方网站给出的点击上传图片，或将图片拖拽到此处，上传后显示的是自己从本地上传的图片，所以结合了Vue的v-if，v-else来实现。首次上传是v-else里的一个id="test1"的div触发的，上传的before函数里把这个div隐藏掉，上传成功后显示本地图片，这时在你还没有对这个页面进行刷新或者跳出这个页面，当你要再次点击上传时（假设你选错了图片要再次点击进行上传），可以把v-else里的img标签用一个id="test3"的a标签包裹起来，然后你的js代码里的upload.render()选择到这个a标签再次触发上传事件。当你已经刷新这个页面或者再次进到这个页面想要重新上传图片时，要进行处理的就是v-if里的内容了，v-if里只有一个img标签用来显示上传后的图片，同样把这个ing标签用一个a标签包裹起来，设置不同的id，再次使用upload.render()来触发上传。
(⊙﹏⊙)，好繁琐，一个小功能重复的代码太多，目前没有想到更好的办法，在社区里也没有找到这样一个功能的实现方法，期待各位大佬能提供更好的方法，感谢！
以下是代码实现
HTML（页面的一个表格表头）

	


	
	

		
		
点击上传图片，或将图片拖拽到此处
	

JS
//拖拽上传

upload.render({
	elem: '#test1'
	, url: '/wktMold/upload'
	, data: {
		matnr: moldNum
	}
	, acceptMime: 'image/*'
	, accept: 'images'
	, field: 'file'
	, size: 500
	, before: function (obj) {
		//预读本地文件示例，不支持ie8
		$('#test1').hide();
		obj.preview(function (index, file, result) {
			$('#demo1').attr('src', result); //图片链接（base64）
		});
	}
	, done: function (res) {
		if (res.code == 0) {//success
			return layer.msg("图片上传成功.");
		}
	}
	, error: function (index, upload) {
		return layer.msg("上传失败,请重新上传.");
	}
});

//拖拽上传
upload.render({
	elem: '#test2'
	, url: '/wktMold/upload'
	, data: {
		matnr: moldNum
	}
	, acceptMime: 'image/*'
	, accept: 'images'
	, field: 'file'
	, size: 500
	, before: function (obj) {
		//预读本地文件示例，不支持ie8
		obj.preview(function (index, file, result) {
			$('#demo2').attr('src', result); //图片链接（base64）
		});
	}
	, done: function (res) {
		if (res.code == 0) {//success
			return layer.msg("图片上传成功.");
		}
	}
	, error: function (index, upload) {
		return layer.msg("上传失败,请重新上传.");
	}
});

//拖拽上传
upload.render({
	elem: '#test3'
	, url: '/wktMold/upload'
	, data: {
		matnr: moldNum
	}
	, acceptMime: 'image/*'
	, accept: 'images'
	, field: 'file'
	, size: 500
	, before: function (obj) {
		//预读本地文件示例，不支持ie8
		obj.preview(function (index, file, result) {
			$('#demo1').attr('src', result); //图片链接（base64）
		});
	}
	, done: function (res) {
		if (res.code == 0) {//success
			return layer.msg("图片上传成功.");
		}
	}
	, error: function (index, upload) {
		return layer.msg("上传失败,请重新上传.");
	}
});

以下链接是layui官方网站的文件上传模块## 标题
链接: link.s