vue+java通过blob实现图片预览功能

vue部分

api

file.js

/*** 通过文件id获取文件路径*/
export function getFilePath(c308Id) {return request({url: '/system/file/getFilePath/' + c308Id,method: 'get'})
}

element-ui

i21.vue

<imgappend disabled :ids='form.i21Id' table='i21' :auth='permission'  tips='' sizes='5000' types='jpg;png;' />import imgappend from '@/views/components/imgappend'

imgappend.vue

<template><div>{{ this.tips }}<el-upload:action="urls"list-type="picture-card":file-list="appendfileList":data="filedata":disabled="flagedit":headers="myHeaders":on-success="handlesuccess":on-preview="handlePictureCardPreview":before-remove="handleRemove":before-upload="handleUpload"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt="" /></el-dialog></div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { getFiles, delFile } from "@/api/tool/file";
import store from "@/store";
export default {data() {return {myHeaders: {},appendfileList: [],dialogImageUrl: "",dialogVisible: false,filedata: {},flagedit: true,urls: "",baseU:'',};},methods: {delfile(file) {var _this = this;delFile(file.id).then((response) => {if (response.data == 1) {_this.appendfileList = _this.appendfileList.filter((item) => item.id != file.id);return true;} else {_this.$alert(response.data.var_result, "删除失败", {confirmButtonText: "确定",type: "error",});return false;}});},handleUpload(file) {var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);var ext_type = true;var ext_size = true;if (typeof this.types !== "undefined") {ext_type = this.types.toLowerCase().indexOf(testmsg.toLowerCase()) >= 0;}const isLt2M = file.size / 1024;if (typeof this.sizes !== "undefined" && this.sizes !== "0") {ext_size = isLt2M <= Number(this.sizes);}if (!ext_type) {this.$message({message: "上传文件格式错误" + this.types,type: "warning",});}if (!ext_size) {this.$message({message: "上传文件大小不能超过" + this.sizes + "Kb",type: "warning",});}return ext_type && ext_size;//  return false;},handleRemove(file, fileList) {var _this = this;if (file.status !== "success") {return true;}_this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {_this.$options.methods.delfile.bind(_this)(file);}).catch(() => {});return false;},getfile() {var _this = this;getFiles({ idTable: this.table, idMain: this.ids }).then((response) => {var _this = this;_this.appendfileList = response.data;for (var i = 0; i < _this.appendfileList.length; i++) {_this.appendfileList[i].url = _this.baseU + _this.appendfileList[i].url;}});},handlesuccess(response, file, fileList) {this.appendfileList = fileList;file.id = response.msg;file.url = this.baseU + "/system/file/flowFile/file/" + file.id;},handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},},props: ["ids", "table", "auth", "sizes", "tips", "types"],watch: {ids: function (newVal, oldVal) {this.urls =process.env.VUE_APP_BASE_API +"/system/file/uploadAccessory/" + this.ids + "/" + this.table;this.filedata.id = this.ids;this.filedata.table = this.table;var _this = this;_this.$options.methods.getfile.bind(_this)();if (this.auth.save) {this.flagedit = false;}},},created() {this.myHeaders = { Authorization: "Bearer " + getToken() };this.baseU = process.env.NODE_ENV === "production" ? "/ifs_avs" + process.env.VUE_APP_BASE_API : process.env.VUE_APP_BASE_API;if (this.ids != null) {this.filedata.id = this.ids;this.filedata.table = this.table;this.getfile();if (this.auth.save) {this.flagedit = false;}}//do something after creating vue instance},
};
</script>

java部分

controller

@ApiOperation("车辆出入记录图片预览")
@GetMapping("/terminalImgFile/{i21Id}")
public AjaxResult terminalImgFile(@PathVariable("i21Id") String i21Id){// 获取文件路径集合List<String> filePathList = sys308Service.listFilePath("i21", i21Id);// 创建集合以保存blob数据List<String> base64List = new ArrayList<>();for (String filePath : filePathList) {try {// 找到文件File file = new File(filePath);// 转base64byte[] imageData = FileUtils.readFileToByteArray(file);String base64 = Base64.getEncoder().encodeToString(imageData);// 拼接格式base64 = "data:image/jpeg;base64," + base64;// 添加到集合base64List.add(base64);} catch (Exception e) {// 发生异常反馈前端throw new RuntimeException("图片预览数据转换异常");}}// 返回return AjaxResult.success("图片预览数据获取成功", base64List);
}

service

/*** 获取对应数据的附件地址* @param idTable* @param idMain* @return*/
public List<String> listFilePath(String idTable, String idMain) {List<Sys308> files = sys308Mapper.getFiles(idTable, idMain);List<String> filePathList = new ArrayList<>();SysConfig sysConfig = configMapper.checkConfigKeyUnique("sys.file.basePath.profile");String basePath = sysConfig.getConfigValue();for (Sys308 file : files) {String filePath = basePath + file.getS308VarFilePath();filePath = filePath.replace("/profile/", "terminal");filePathList.add(filePath);}return filePathList;
}

mapper

sys308Mapper

// 根据主表简称、主表id获取到相关文件（集合）
List<Sys308> getFiles(@Param("idTable") String idTable, @Param("idMain") String idMain);

configMapper

/*** 根据键名查询参数配置信息* * @param configKey 参数键名* @return 参数配置信息*/
public SysConfig checkConfigKeyUnique(String configKey);

mapper.xml

sys308Mapper.xml

<resultMap id="BaseResultMap" type="com.rongyi.common.domain.Sys308"><id property="s308Id" column="s308_id" jdbcType="VARCHAR"/>...
</resultMap>
<select id="getFiles" resultMap="BaseResultMap">select<include refid="Base_Column_List"/>from sys308wheres308_id_table = #{idTable,jdbcType=VARCHAR}AND s308_id_main = #{idMain,jdbcType=VARCHAR} AND s308_flag_state = '9'
</select>

configMapper.xml

<resultMap type="SysConfig" id="SysConfigResult"><id     property="configId"      column="config_id"      /><result property="configName"    column="config_name"    /><result property="configKey"     column="config_key"     /><result property="configValue"   column="config_value"   /><result property="configType"    column="config_type"    /><result property="createBy"      column="create_by"      /><result property="createTime"    column="create_time"    /><result property="updateBy"      column="update_by"      /><result property="updateTime"    column="update_time"    />
</resultMap>
<select id="checkConfigKeyUnique" parameterType="String" resultMap="SysConfigResult"><include refid="selectConfigVo"/>where config_key = #{configKey} limit 1
</select>