纯JS上传图片功能心得

第一步传给后台接口转化显示格式
先var str 拼接字符串（全局）
再插入html里上代码
str += <li><img src = ${file} alt=""><i></i></li>;
$("#ulImg").html(str);
//点击删除，删除父级一行
$(’#ulImg li i’).click(function () {
$(this).closest(’#ulImg li’).remove();
});
点击删除按钮删除父级那一行
就能能实现上传图片并且显示功能
提交到后台是用了特别笨的办法 先上代码
var imgsrc = $("#ulImg li img")
for (var i=0;i<imgsrc.length;i++){
arr.push(imgsrc[i].src);
arr1 = new Set(arr);
arr2 = Array.from(arr1);
先定义全局arr数组接收img的src
这里碰到了两个bug
1.点击上传按钮会一直往arr数组里添加，会有重复图片上传，当用户其他数据发现错误，多次点击提交按钮时会提交很多，给数据库传入了无用的数据，加重了数据库的负担
我的解决办法是：Es6去重，声明一个空数组，一直作比较重复的就不会传入数组了，这个bug就解决了，不会有重复的图片上传，
2.用户点击提交之后，未能提交上去，想再次删除图片时，显示那里的图片是没了，但是传入数组里的src还在，还是一样还会传入数据库，也会加重数据库的负担，传入无用的图片
解决办法，当接口返回错误信息时，清空所有数组，把数组的length=0，数组清空之后再次执行上述代码，重新存放接口返回的图片src，实现了增删的功能，也能减少数据库的消耗
本人前端初级水平，野路子实现图片上传并显示功能，以及增删功能，望大神们多多指点。

结语：现在js基础还不够好，想先把js基础打牢固，更利于以后的发展，进而学习VUE.js、node.js，学无止境，每天都在一点点进步，希望我在程序员这条道路上走的更远，愿与各位热爱代码，热爱编程的朋友，一齐并发，使互联网行业更加辉煌。