图片预览（blob:http://……）后如何上传给后台？

[雾里看花の]

最近在改图片上传功能，之前是通过FileReader.readAsDataURL(file)实现预览，上传前再把base64图片转为blob的，但是这样有个缺点，预览的时候没办法在img标签中保存原图片名，于是我就想到了如下方法（部分代码省略）：

<div class="layui-container" style="margin-top: 50px;">
			<form action="#" method="post" enctype="multipart/form-data">
				<input type="file" id="files" name="files" accept="image/*" multiple="multiple" style="display: none;"/>
				<button type="button" onclick="$('#files').click();" class="layui-btn">选择图片</button>
				<button type="button" class="layui-btn">提交上传</button>
				<div class="image-container">
					<ul class="image-list" id="fileList">
						
					</ul>
				</div>
			</form>
		</div>
		<script type="text/javascript">
			$(function(){
				$("#files").on("change",function(){
					var file = $('#files').get(0).files
					for(i = 0; i< file.length; i ++) {
						var size = file[i].size;
						if(size > 1024 * 1024) {//限制图片大小只能在1M以内
							layer.msg('图片大小不能超过1M', {icon:5});
							break;
							return false;
						}
						var url = getUrl(file[i]);
						var html = "<li class='image-item'><img data-file="+file[i]+" data-fileName="+file[i].name+" src="+url+"></li>";
						$("#fileList").append(html);
					}
				})
			});
			function getUrl (file) {
				var url = null;
	            if (window.createObjectURL != undefined) {
	                url = window.createObjectURL(file)
	            } else if (window.URL != undefined) {
	                url = window.URL.createObjectURL(file)
	            } else if (window.webkitURL != undefined) {
	                url = window.webkitURL.createObjectURL(file)
	            }
	            return url
			}
		</script>

然后生成的预览图片是这样子的：

<img src="blob:http://127.0.0.1:8020/eab54fa6-c4ee-415e-b022-3e68577f09bc" />

这种blob:http://……要怎么提交到后台啊？有人知道吗？

我的需求是上传前实现图片预览，并且需要把原文件名穿给后台（ajax形式上传图片），有其他更好方法的欢迎指教

[雾里看花の]

已经找到解决办法，在以上基础上将$("img").attr("data-file",file[i])改为$("img").data("data-file",file[i]) 因为data-*属性无法存储对象，而data可以 ajax提交上传的时候把file对象放到formdata中就行了

[cnm_xinlei]

引用 1 楼 genaro26 的回复:

已经找到解决办法，在以上基础上将$("img").attr("data-file",file[i])改为$("img").data("data-file",file[i]) 因为data-*属性无法存储对象，而data可以 ajax提交上传的时候把file对象放到formdata中就行了

楼主的方法正是我想说的，个人觉得用base64方式上传图片不是很好，因为base64是字符串而且很长，在请求接口的时候比较耗服务器资源，而利用表单方式（ajax可用formdata对象）上传图片时，可以解决这个问题，因为这种方式下图片传输是被优化了的，比一大串字符串的传输要好得多

[moquan0506]

文件[我]? 是啥意思？

[莫得香菜]

大佬有最后的代码吗，还是不明白。希望可以贴出最终的代码

[仙桃大道]

我是用数组解决的.
var fileLists = []; //定义数组
fileLists.push(files[0]); //填充
for (let i = 0; i < fileLists.length; i++) { //通过循环读出/赋值
formData.append('file[]',fileLists[i]);
}