vue+el-upload实现多文件动态上传

vue+el-upload多文件动态上传，供大家参考，具体内容如下

使用场景

点击【添加/删除】，可动态增加/删除行数，并为每行上传附件，附件暂存前端，点击【上传】可以将所有附件和部分名称同时提交后台，实现表格的动态多文件上传。其中el-upload ，相关钩子函数可查看el-upload 官方文档

这里的表格行的新增是在弹框中填完再写入的，也可直接在表格中添加行，然后填写内容（template slot-scope=“scope” 注释部分代码），这里仅提供思路

代码html部分

           

                            其他必须持有的证照添加行
                            上传
            
            
                
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
            
            
            
                
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                
                

                    取 消
                    确 定
                
            

js部分代码

let nodeVue = new Vue({
    el: '.vue-box',
    data: {
        labelWidth: '150px',
        tableData: [],
        uploadParams:{
            fileTagName: ''
        },
        totalFileList:[],
        totalFileNameList:[],
        addCardVisible:false,
        fileInfo:{
            cardName:'',
            cardNo:'',
            startDate:'',
            endDate:''
        }
    },
    methods:{
        // 文件相关
        uploadRemove:function(file) {
            let that = this;
            // 删除文件列表中的文件
            for(let i=0;i 
 

后台接收代码

@Controller
@RequestMapping("/testupload")
public class RegisterController {

 // 附件从 request中获取
    @RequestMapping("/fileUpload")
    @ResponseBody
    public ServerResponse fileupload(HttpServletRequest request,String fileNameList){
        try{
            if(fileNameList == null){
                throw new Exception("请选择文件后上传！！！");
            }
            // 1. 上传的位置
            String path = "E:\\uploadfile";
            //判断该路径是否存在
            File file = new File(path);
            if (!file.exists()) {
                file.mkdirs();
            }
            // 处理以字符串形式上传的关联数据信息
            JSONArray jsonArray = JSON.parseArray(fileNameList);
            // 遍历关联列表
            for(Object object : jsonArray){
                JSONObject jsonObject = JSON.parseObject(object.toString());
                System.out.println(jsonObject.getString("cardName"));
                // 获取文件
                MultipartFile file1 = ((MultipartHttpServletRequest) request).getFile(jsonObject.getString("fileName"));
                // 获取文件信息
                String filename = file1.getOriginalFilename();
                System.out.println(filename);
                // 保存文件
                file1.transferTo(new File(path, filename));
            }
        }catch (Exception e) {
            log.error(e.getMessage());
            return ServerResponse.createByErrorMessage(e.getMessage());
        }
        return ServerResponse.createBySuccess();
    }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。