在线问题反馈模块实战(八)​:实现图片上传功能(上)

👨‍🎓作者：bug菌 ✏️博客：CSDN​、掘金等 💌公众号：​​猿圈奇妙屋​​ 🚫特别声明：原创不易，转载请附上原文出处链接和本文声明，谢谢配合。 🙏版权声明：文章里可能部分文字或者图片来源于互联网或者百度百科，如有侵权请联系bug菌处理。

一、前言🔥

       接下来的这几期，bug菌想跟大家分享一下自己昨天刚接到一个临时的需求，热乎着呢，想分享一下自己是如何面对临时需求并制定整个开发周期，其中包括从梳理业务到创建业务表再到实现业务逻辑形成闭环再到与前端对接，其中会穿插一些业务拓展及功能性拓展，这一条龙流程在线与大家一起见证，分享给刚入门的小伙伴，希望对你们有所帮助。

环境说明：idea2019.3 + springboot2.3.1.REALSE + mybati-plus3.2.0 + mysql5.6 + jdk1.8

二、正文🔥

        咱们这期就重点带着大家来实现反馈针对所填写的额反馈问题及附件图片一并保存，对于这个接口，逻辑还是相对的有些复杂的。为什么这么说的呢？因为这次接口对于反馈内容及图片是统一 一并调用触发的，不是单独上传某图片或者单独保存某些字段内容。对吧，肯定要保证一次请求的数据的事务性，所以这二者逻辑必须保证在一个接口中触发。

        所以这里我就来考考大家，如果这个接口让你来设计，你会怎么做？或者给我说说你对这个需求，你是分几步来梳理并实现的。如果暂时没有啥想法，没有关系啊，就由我来给大家分享下我对这个需求是如何设计并实现的吧。

1️⃣请求格式

        考虑到要保存图片，所以我这里就采用MultipartFile类来接收图片数据。所以自然就不能使用application/json的请求方式，因为@RequestBody是无法与MultipartFile类一并使用的，所以需要前端采用form-data表单的形式提交才行。对于postman也是支持该方式测试的，这里我就给大家演示一下，如果通过postman进行form-data表单式接口调用。

演示截图如下：

在线问题反馈模块实战(八)​:实现图片上传功能(上)_数组

        如上啊，就是对于此接口，我定义出来的接口及参数入口，就先给你们亮相啦，后续我会慢慢解释。

2️⃣请求方式

        接口采用何种请求方式，Get？Post还是Put？等，这个要怎么考虑呢？我这还是采用最直接的请求方式，Get请求，为什么？你们猜猜看。

@GetMapping("/save")

3️⃣请求路径

        尽量路径命名要见名知意，像这里就是需求就是【保存问题的反馈】，所以直接定义子路径为："/save"，是不是非常直接。明白人一眼就能看懂，再附上有父访问路径“/user-questions”的加持，所以这样取名往往是不会被骂且相对优雅易懂的。

@RequestMapping("/user-questions")
@GetMapping("/save")

演示：完整访问该接口接口请求路径。

http://localhost:8889/review/user-questions/save

4️⃣接口入参

        入参尽量根据前端的需要出发，有哪些字段信息是需要页面表单提交，那这部分字段信息，就是你的接口方法入参。

public ResultResponse<Boolean> saveQuestion(@ApiParam("图片数组") MultipartFile[] images,
                                            @ApiParam("反馈问题类型") String questionType,
                                            @ApiParam("反馈问题/建议详情") String questionContent,
                                            @ApiParam("反馈问题/建议所在页面"){}

5️⃣接口返回值

        需要返回给页面什么样的结果，这是你需要考虑的，是无返回值还是有返回具体？具体返回什么结构数据？

演示：我这里是直接返回一个boolean值。 

public ResultResponse<Boolean> saveQuestion(){}

6️⃣接口注释

        对于定义一个接口而言，每一个参数及方法作用，都得分别描述清楚，不仅方便自己查看，也是也为日后维护降低难度。

/**
     * 反馈问题保存
     *
     * @param images          img图片数组
     * @param inPage          反馈问题/建议所在页面
     * @param questionContent 反馈问题/建议详情
     * @param

7️⃣总结

        如上是我对一个需求接口做的全面分析剖析，先怎么样后怎么样，一步一步来，不知道你们心中所想的是不是也跟我一样实现步骤一致呢？

如下是对于该接口所定义的完整版代码：仅供参考。

/**
     * 反馈问题保存
     *
     * @param images          img图片数组
     * @param inPage          反馈问题/建议所在页面
     * @param questionContent 反馈问题/建议详情
     * @param
    @GetMapping("/save")
    @SysLog(logType = LogTypeEnum.LOG_TYPE_IMG_UPLOAD)
    @ApiOperation(value = "反馈问题保存", notes = "反馈问题保存")
    public ResultResponse<Boolean> saveQuestion(@ApiParam("图片数组") MultipartFile[] images,
                                                @ApiParam("反馈问题类型") String questionType,
                                                @ApiParam("反馈问题/建议详情") String questionContent,
                                                @ApiParam("反馈问题/建议所在页面") throws IOException {
        return

        如果你对于该需求，你有不同的想法或者更好的建议，欢迎评论区跟我交流呀。子曰：“三人行，必有我师焉。择其善者而从之，其不善者而改之。”