vue+springBoot+swagger+myBatis+pg 实现图片上传功能，数据库存储byte

vue+springBoot+swagger+myBatis+pg

实现图片上传功能，数据库存储byte

上传

vue界面

const formDataArr  =  new FormData();
formDataArr.append("name", this.formParm.name);
formDataArr.append("age", this.formParm.age);
formDataArr.append("file", this.formParm.file);
add(formDataArr).then((res)=>{
    this.initTableData();
})

js界面

export function add(data) {
    return request({
        url: '/add',
        method: 'post',
        data,
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    });
}

参数实体类

//此处使用的lombok
@Data
public class StudentInDto {
    @JsonProperty("uuid")
    @ApiModelProperty(value = "uuid")
    private String uuid;
  
    @JsonProperty("name")
    @ApiModelProperty(value = "name")
    private String name;
  
    @JsonProperty("age")
    @ApiModelProperty(value = "age")
    private String age;

    @JsonProperty("fLogo")
    @ApiModelProperty(value = "学生logo")
    private byte[] fLogo;
}

controller层

	@PostMapping("/add")
    public JsonBean add(StudentInDto studentInDto,MultipartFile file){
        //处理图片文件流
        //注意：file不能在实体类StudentInDto中定义，否则当不传文件的时候file为null直接报错，如下错误演示。
        if(fFile != null){
            try {
                InputStream is = fFile.getInputStream();
                byte[] buffer = new byte[1024];
                int len = 0;
                ByteArrayOutputStream bos = new ByteArrayOutputStream();
                while ((len = is.read(buffer)) != -1){
                    bos.write(buffer,0,len);
                }
                bos.flush();
                byte[] data = bos.toByteArray();
                studentInDto.setFLogo(data);
                bos.close();
            } catch (IOException e) {
                return JsonBean.returnResponse(true, ResultCode.MODIFY_FAIL,"文件读取异常！");
            }
        }
        return studentService.add(studentInDto);
    }

错误演示

@Data
public class StudentInDto {
    @JsonProperty("uuid")
    @ApiModelProperty(value = "uuid")
    private String uuid;
  
    @JsonProperty("name")
    @ApiModelProperty(value = "name")
    private String name;
  
    @JsonProperty("age")
    @ApiModelProperty(value = "age")
    private String age;

    @JsonProperty("fLogo")
    @ApiModelProperty(value = "学生logo")
    private byte[] fLogo;
  
    @JsonProperty("fFile")
    @ApiModelProperty(value = "学生logo文件")
    private MultipartFile fFile;
}
错误信息：
org.springframework.validation.BeanPropertyBindingResult: 1 errorsField error in object 'studentInDto' on field 'fFile': rejected value [[object Object]]; codes [typeMismatch.studentInDto.fFile,typeMismatch.fFile,typeMismatch.org.springframework.web.multipart.MultipartFile,typeMismatch]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [studentInDto.fFile,fFile]; arguments []; default message [fFile]]; default message [Failed to convert property value of type 'java.lang.String' to required type 'org.springframework.web.multipart.MultipartFile' for property 'fFile'; nested exception is java.lang.IllegalStateException: Cannot convert value of type 'java.lang.String' to required type 'org.springframework.web.multipart.MultipartFile' for property 'fFile': no matching editors or conversion strategy found]

service、serviceImpl

JsonBean add(StudentInDto studentInDto);

@Override
public JsonBean add(StudentInDto studentInDto) {

  return JsonBean.returnResponse(true,ResultCode.SERVICE_OK,
                                 StudentMaintainRepository.add(studentInDto));
}

repository、mapper、repositoryImpl

int add(StudentInDto studentInDto);

int add(StudentInDto studentInDto);

@Override
public int add(StudentInDto studentInDto) {
  return StudentMaintainMapper.addStudent(StudentInDto);
}

###mapper、mapper.xml

<insert id="add" parameterType="com.ts.student.model.dto.StudentInDto">
        INSERT INTO student name,age,file
        VALUES (#{name},#{age},#{file})
 </insert>

查询

swagger调试显示如图则说明成功

vue界面

<FormItem label="学生logo">
  <img :src="logoSrc" alt="" style="width: 100%;height: 120px">
</FormItem>

js界面

getLogoById({uuid: row.uuid}).then((res)=>{
  let Urlblob = new Blob([res]);    //此处的res 是服务端返回的二进制流文件
  let imgUrl = window.URL.createObjectURL(Urlblob);   //此处讲刚才获取的二进制流转换成地址路径
  this.logoSrc = imgUrl;
})

参数实体类

@Data
public class StudentOutDto {
	@JsonProperty("fLogo")
    @ApiModelProperty(value = "学生logo")
    private byte[] fLogo;
}

controller层

	@PostMapping("/getLogoById")
    public void getLogoById(@RequestBody StudentInDto studentInDto, HttpServletResponse response){
        ServletOutputStream out = null;
        byte[] b = null;
        List<StudentOutDto> list = studentService.getLogoById(studentInDto);
        if(list.size()>0){
            b = list.get(0).getFLogo();
        }
        try {
            InputStream is = new ByteArrayInputStream(b);
            response.setContentType("image/*");
            out = response.getOutputStream();
            int len = 0;
            byte[] buffer = new byte[1024];
            while ((len = is.read(buffer)) != -1){
                out.write(buffer,0,len);
            }
            out.flush();
            out.close();
        } catch (IOException e) {
            JsonBean.returnResponse(true, ResultCode.MODIFY_FAIL,"文件读取异常！");
        }
    }

service、serviceImpl

List<StudentOutDto> getLogoById(StudentInDto studentInDto);

@Override
public List<StudentOutDto> getLogoById(StudentInDto studentInDto) {
  return studentMaintainRepository.getLogoById(StudentFilterInDto);
}

repository、mapper、repositoryImpl

List<StudentOutDto> getLogoById(StudentInDto studentInDto);

List<StudentOutDto> getLogoById(StudentInDto studentInDto);

@Override
public List<StudentOutDto> getLogoById(StudentInDto studentInDto) {
  return studentMaintainMapper.getLogoById(StudentFilterInDto);
}

mapper.xml

<select id="getLogoById"  parameterType="com.ts.student.model.dto.StudentInDto">
            resultType="com.ts.student.model.dto.StudentOutDto">
        SELECT fLogo FROM student WHERE  uuid=#{uuid}
</select>

pg数据库

字段名：flogo  字段类型：bytea