上传图片：点击按钮后进入对话框，点击➕号直接上传图片，点击确定即保存

一、前言

　　一般上传图片时，是点击编辑按钮，弹出对话框，然后在对话框中点击上传按钮，弹出上传图片的对话框，点击加号即可上传，点击确定，图片就会上传到指定地点，再点击确定，就会保存信息到后台。如下图所示：

 现在的需求：在列表页面，直接点击上传按钮，就可以弹出上传图片的对话框，点击加号直接上传，点击确认就可以将图片信息绑定到t_attach表中。如下所示：

点击上传质检报告

二、前端代码

1、父组件代码

template

"质检报告" align="center" width="160">
        
      

script

import QualityReport from './QualityReport'
components: { QualityReport },

2、子组件代码

注意：在点击确定按钮的时候，就将图片的信息保存到t_attach表中。

三、后台代码

controller

@PostMapping("/edit")
    public Result editPrepare(@RequestBody CjOutput cjOutput) {
        return jcIntoService.editCjOutput(cjOutput);
    }

service接口

public interface JcIntoService {
    Result editCjOutput(CjOutput cjOutput);
}

service实现类

@Service
public class JcIntoServiceImpl implements JcIntoService {
    @Autowired
    private AttachFileService attachFileService;

    @Transactional
    public Result editCjOutput(CjOutput cjOutput) {
        //插入实物图片信息 专门为web上传实物图片的代码
        attachFileService.saveAttachFileList(cjOutput.getQualityReportList(), cjOutput.getId().intValue());
        return Result.operating("质检报告上传成功", true, ResultCode.SUCCESS);
    }

}

实体类添加

@Transient
    private List qualityReportList;