手机移动端开发 多文件上传+页面回显，到后台如何接参数

手机移动端开发 多文件上传+页面回显
第一次写 不太熟练 需要的看不懂的可以下面问我

思路

• [ 公司有一个多文件上传需求，百度了好久都不适用，自己搞了一个，首先说下我的思路：]
• 1、使用input file标签上传文件 加img图片回显，首先点击上传按钮选择文件，然后多文件进行处理，在img src后面跟上处理后的base64文件流，图片回显成功，然后把文件放进全局的var arr数组里面，然后把arr数组放进formdata中传到后台。
• 2、注意点：文件上传我的理解能治用form表单提交，所以使用了new formdata(此处有坑，因为formdata默认的事调用toString()方法，所以此处需要把文件数组循环放入formdate中)
• 3、对了还有一点提交post请求的时候 我这面必须设置一个 headers:{
  ‘Content-Type’:‘multipart/form-data’ //hearder 很重要，Content-Type 要写对
  },详见下面代码
• 4、此篇文章只是针对前端提交异步请求到后端的流程代码(前端引用发送请求的js和路由js需要你们根据自己项目中的去修改)，具体业务需要自己添加
• 5、使用的时候看下代码 F12调试下 具体图片可以让你们UI切一个给你们 引进来就可以了

直接上代码（前端代码）

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    



    

        

            

                

                    图片
                    
                    
                    
                    上传
                
                

                    

                    
                    

                        
                        
                        
                    
                    

                        
                        
                        
                    
                    

                        
                        
                        
                    
                    

                        
                        
                        
                    
                    

                        
                        
                        
                    
                    

                        

                        正在上传...
                    
                

            
        
    

success

upload.css(控制页面样式的)

@charset "utf-8";
/* CSS Document */

body{ font:12px/24px "Microsoft YaHei","微软雅黑"; color:#666; background-color:#dcdddd; word-wrap:break-word;max-width: 750px;margin: 0 auto;}
*{ margin:0; padding:0; -webkit-tap-highlight-color:rgba(0,0,0,0);    -webkit-overflow-scrolling: touch;}
ul,ol,li{ list-style:none outside;}
.nowrap{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
a{ color:#666; text-decoration:none;}
a:hover{ text-decoration:none;}
.left{ float:left;}
.right{ float:right;}
.center{ text-align:center;}
.tx_l{ text-align:left;}
.tx_r{ text-align:right;}
.tx_2{ text-indent:2em;}
.bold{ font-weight:bold;}
img{ border:medium none; vertical-align:middle;}
textarea{ resize:none; vertical-align:middle;}
input,button,select,textarea{ -webkit-appearance:none; border:medium none; background:none; outline:none; font:1em/normal "Microsoft YaHei","微软雅黑";}
.btn{ cursor:pointer;}
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; }
.clearfix:after { clear: both;}

.align_right{text-align: right;}

html,body{font-size: 62.5%;}
html, body {width: 100%;height: 100%;overflow: hidden;}
.wrapper{width: 100%;height: 100%;display: -webkit-flex;flex-direction: column;overflow:hidden;}
.content{width: 100%;height: auto;-webkit-flex:1;flex: 1;box-sizing: border-box;overflow-y:scroll;}

.bg1{background: #dcdddd url(../images/bg1.jpg) no-repeat bottom center;-webkit-background-size:100% 100%;}
.inter_box{width: 90%;margin: 0 auto; padding-top: 150px;}
.inter_d1_load_title{padding: 10px 0 6px 0;display: -webkit-flex;justify-content: space-between;font-size: 1.3rem;line-height: 20px;color: #3e8b34;}
.inter_d1_load_title a{color: #3e8b34;}
.inter_d1_load_title .load_icon{background: url(../images/load_icon.png) no-repeat left center;-webkit-background-size:18px 16px;padding-left: 19px;}
.inter_d1_load_box{width: 100%;border: 1px solid #408c34;border-radius: 8px;padding: 6px 2% 0;box-sizing: border-box;}
.inter_d1_loadimg{width: 31%;float: left;margin: 0 1% 5px;position: relative;}
.inter_d1_loadimg img{width: 100%;height: 64px;}
.inter_d1_loadimg  img.load_close{width: 10px;height: 10px;position: absolute;top: 0;right: 0;}
/*input file*/
.imgfile{position: absolute; top: 0; left: 0; width: 100%; height: 64px; z-index: 1; opacity: 0;}
/*load box*/
.loading_box {font-size:16px; line-height:35px; color:#3e3a39; height:40px; text-align:center; padding:30px 0;margin-top:2px;position: absolute;top:40%;left:35%;display:none;}
.pop_cover{width: 100%; height: 100%; background: rgba(0,0,0,0.2); position: fixed; top: 0; left: 0;}
.wid30 { width:35px; height:35px; vertical-align:middle; margin-right:8px;z-index:999;}

后端代码

 @PostMapping("/upload")
    public ResponseData uploadFile(@RequestParam(value="file",required=false) MultipartFile[] file) {
        Map map = new HashMap();
        //此处是我们项目中写的上传到图片服务器的工具类(你们使用的话 要根据自己需求来写)
        String[] picStrings = FastDFSClientUtils.upload(file);
        map.put("url",picStrings);
        
        return ResponseData.ok(map);
    }

图片展示