记录 vue使用FormData 把数据和多个附件一起传入后台

上代码

上传附件按钮

      

      

          
合同附件:
          
添加附件
      
      
      

      

把添加附件按钮写在你的vue下method方法下面

var addshebei=new Vue({
        el:"#addshebei",
        data:{
            id:"",
            file: []
        },
        methods: {
            
            initTime(){
                var mountedSelf = this; // 当前的vue对象
                laydate.render({
                    elem: '#enterTime', //指定元素 绑定laydate的元素，即id= laydate的那个input
                    type: 'datetime',
                    done: function (value) { // value 是laydate选择的日期
                        mountedSelf.enterTime = value; // vue对象的属性设置为当前的日期
                    },
                });
                laydate.render({
                    elem: '#quitTime', //指定元素 绑定laydate的元素，即id= laydate的那个input
                    type: 'datetime',
                    done: function (value) { // value 是laydate选择的日期
                        mountedSelf.quitTime = value; // vue对象的属性设置为当前的日期
                    },
                });
            },
            saveshebei:function(event){
                var dicDeviceType={
                    id:this.typeId,
                    typeName:$("#typeId").find("option:selected").text()
                };

                if(this.code==""||this.name==""){toastr.error("请填入设备编号或设备名称");return;}
                let formData = new FormData();
                formData.append('deviceInfo',JSON.stringify(this._data));
                this.file.forEach((file) => {
                    formData.append(`file`,file)
                })
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                this.$http.post('/DeviceInfo/addDeviceInfo',formData,config).then((res)=>{
                    var resMsg = res.body;
                    resMsg.deviceInfo.dicDeviceType=dicDeviceType;
                    if(resMsg.result>0){
                        $('#mainContent').DataTable().row.add(resMsg.deviceInfo).draw();
                        $("#myModal").modal("hide");
                        toastr.success("添加成功");
                    }else{
                        toastr.error("添加失败");
            	    }
                },(res)=>{
                    toastr.error("发生错误");
                });
            },
            
            new_accessory(){
                $("#new_accessory tbody").append(
                    "新附件" +
                    "移除附件")
            }

        }
    });

每一次选择文件都把文件添加到当前对象里

function getFile(data){
        var file = data.files[0];
        addshebei.file.push(file)
    }

function removeFile(obj){
        var tr=$(obj).parents("tr");
        $(tr).remove();
    }

 

效果

 

后台接受参数，把附件放在指定目录并把信息存进数据库

@RequestMapping("/addDeviceInfo")
	@ResponseBody
	public Map addDeviceInfo(String deviceInfo,HttpSession session,@RequestParam(value = "file", required = false)  MultipartFile[] file) throws IOException {
		Map map = new HashMap();
                //JSON字符串转换成Javabean对象
		DeviceInfo dt=JSONObject.parseObject(deviceInfo,DeviceInfo.class);
		String id = LDXXUtils.getUUID12();
		int state = 0;
		User user = (User) session.getAttribute("user");
		if(null!=user) {
			dt.setEditUserId(user.getUserId());
		}
		dt.setEditDatetime(GetThisTimeUtils.getDateTime());
		dt.setId(id);

		String webFile = getWebFileUtils.getWebFile();
		String path=webFile+"shebeiguanli_File";
		File f=new File(path);
		if(!f.exists()){
			f.mkdirs();
		}
		if(file.length>0){
			List list=new ArrayList<>();
			for(int j=0;j

public class getWebFileUtils {

    public static String getWebFile(){
        String jar_parent="";
        try {
            jar_parent = new File(ResourceUtils.getURL("classpath:").getPath()).getParentFile().getParentFile().getParent();//获取当前项目所在同级目录位置
            jar_parent+= File.separator+"LQTProject_file"+File.separator;

        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }
        return jar_parent;
    }
}