通过API接口实现图片上传

通过API接口实现图片上传

需求

近期在接口功能实现要求,实现一个API图片上传,补充商户开户后补充图片信息,用于管理人员审核.

业务要求

  1. 图片有多条,法人信息,授权信息,等 有必填图片,有非必填图片,文件大小限制为2MB.
  2. 必填的图片未上传,则本次均不录入数据库.
  3. 图片要求在一次确认后,审核人员才能显示.
  4. 需要进行相关得记录,用于后续查看.

详细设计

为了满足以上实现,有两种实现方式

  1. 单个批量接口 所有的文件通过一个接口批量上传.
  2. 文件单条上传+确认上传.

文件大小在2MB,如果批量上传,10个文件就要20MB,耗时很长,而且会占用带宽,批量接口实现起来比较复杂,评估后,决定使用单条上传+确认上传两步的方式.

流程图

附件上传:

在这里插入图片描述

附件确认:
确认接口

风险点和优化事项

  1. 重复多次上传进行限制.
  2. 针对重复图片,同批次进行MD5判断,如果已存在则不需要传入到内部的文件服务.

数据库表设计

在这里插入图片描述
在这里插入图片描述

​ MERCHANT_FILE_UPLOAD_BATCH 文件批次上传表

-- auto-generated definition
create table MERCHANT_FILE_UPLOAD_BATCH
(
    PKID         NUMBER not null
        constraint MERCHANT_FILE_UPLOAD_BATCH_PK
            primary key,
    OID_TRADERNO VARCHAR2(32),
    BATCH_ID     VARCHAR2(32),
    BATCH_STATUS VARCHAR2(32),
    CREATE_TIME  TIMESTAMP(6),
    UPDATE_TIME  TIMESTAMP(6),
    CONFIRM_TIME TIMESTAMP(6)
)
/

comment on column MERCHANT_FILE_UPLOAD_BATCH.OID_TRADERNO is '商户号'
/

comment on column MERCHANT_FILE_UPLOAD_BATCH.BATCH_ID is '商户批次号'
/

comment on column MERCHANT_FILE_UPLOAD_BATCH.BATCH_STATUS is '批次状态
CREATED
SUCCESS'
/

comment on column MERCHANT_FILE_UPLOAD_BATCH.CONFIRM_TIME is '确认时间'
/

create unique index BATCH_UN
    on MERCHANT_FILE_UPLOAD_BATCH (OID_TRADERNO, BATCH_ID)
/

create index BATCH_CREATE_TIME_INDEX
    on MERCHANT_FILE_UPLOAD_BATCH (CREATE_TIME)
/


MERCHANT_FILE_UPLOAD_RECORD 文件上传记录表

-- auto-generated definition
create table MERCHANT_FILE_UPLOAD_RECORD
(
    RECORD_ID    NUMBER not null
        constraint MERCHANT_FILE_UPLOAD_RECORD_PK
            primary key,
    OID_TRADERNO VARCHAR2(32),
    PHOTO_TYPE   VARCHAR2(64),
    PHOTO_SIZE   NUMBER(32),
    PHOTO_ID     VARCHAR2(256),
    CREATE_TIME  TIMESTAMP(6),
    UPDATE_TIME  TIMESTAMP(6),
    BATCH_ID     VARCHAR2(32),
    FILE_MD5     VARCHAR2(64)
)
/

comment on column MERCHANT_FILE_UPLOAD_RECORD.RECORD_ID is '主键id'
/

comment on column MERCHANT_FILE_UPLOAD_RECORD.OID_TRADERNO is '商户号'
/

comment on column MERCHANT_FILE_UPLOAD_RECORD.PHOTO_TYPE is '照片类型'
/

comment on column MERCHANT_FILE_UPLOAD_RECORD.PHOTO_SIZE is '照片大小,单位为字节'
/

comment on column MERCHANT_FILE_UPLOAD_RECORD.PHOTO_ID is '照片ID,返回的照片ID'
/

create index CREATE_TIME_INDEX
    on MERCHANT_FILE_UPLOAD_RECORD (CREATE_TIME)
/

create unique index MERCHANT_FILE_UPLOAD_UINDEX
    on MERCHANT_FILE_UPLOAD_RECORD (OID_TRADERNO, PHOTO_TYPE, BATCH_ID)
/

create index MD5__INDEX
    on MERCHANT_FILE_UPLOAD_RECORD (FILE_MD5)
/


接口设计

一 附件上传接口

请求报文:

参数名出现要求描述
bankMchtIdM(18)商户号
batchIdM(32)文件上传批次号,用于文件上传确认
photoTypeM(2)上传照片的类型(见字典6.5)
photoMBase64编码的照片,将编码后的****+*替换成*-****

二 .附件确认

请求报文:

参数名出现要求描述
bankMchtIdM(18)商户号
batchIdM(32)文件上传批次号,用于文件上传确认

代码实现

碰到几个问题

  1. 图片转base64是需要把 *+*替换成*-*

    base64转码采用

    java.util.Base64

    编码:

    Base64.getEncoder().encodeToString(Files.readAllBytes(Paths.get("微信图片_20201104162519.jpg"))).replaceAll("\\+", "-")
    
    

    解码:

    Base64.getDecoder().decode(reqVO.getPhoto().replaceAll("-", "+"))	
    
  2. 图片超过2MB,被springboot自带的tomcat 限制无法正常上传.

    application.properties springboot 1.5.版本

    需要设置: server.tomcat.max-http-post-size=-1

参考文档:

  1. https://www.cnblogs.com/xyabk/p/9012612.html
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-upload标签是element-ui组件库的一个上传组件,可以方便地实现图片上传功能。调用上传图片接口实现图片上传的具体步骤如下: 1. 在Vue组件中引入el-upload组件: ``` <template> <el-upload class="upload-demo" action="/api/upload" :on-success="handleSuccess" :on-error="handleError" :before-upload="beforeUpload" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> </template> ``` 2. 在data中定义上传文件的参数: ``` data() { return { imageUrl: '', uploadHeaders: { 'Authorization': 'Bearer ' + getToken(), }, }; }, ``` 这里需要注意的是,上传图片时需要带上token进行身份验证,因此我们在uploadHeaders中添加了Authorization参数,值为当前用户的token。 3. 定义上传成功和上传失败的回调函数: ``` methods: { handleSuccess(response, file, fileList) { this.imageUrl = response.url; this.$message({ message: '上传成功', type: 'success', }); }, handleError() { this.$message.error('上传失败'); }, }, ``` 上传成功后,我们可以在handleSuccess回调函数中获取到服务器返回的图片url,然后将其赋值给imageUrl,以便在页面上显示上传的图片。 4. 定义上传前的钩子函数: ``` beforeUpload(file) { const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'; if (!isJPG) { this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!'); return false; } const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); return false; } return true; }, ``` 在beforeUpload函数中,我们可以对上传的图片进行一些校验,比如限制图片的格式和大小等。 5. 最后,在服务器端编写上传图片接口,接收图片文件并保存到服务器中。 以上就是使用el-upload标签调用上传图片接口实现图片上传的具体步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值