Explicación detallada de la carga de archivos de entrada de archivos de arranque y el uso de eco

Debido a que estoy usando el marco Ruoyi para el aprendizaje, la función de entrada de archivo de arranque está integrada en él. Se puede decir que he pisado muchas trampas. Ahora compartiré con ustedes mi experiencia de aprendizaje y depuración.

1. El complemento de entrada de archivo bootstrap utiliza instrucciones en chino

(1) Introducción de atributos

Atributos	tipo	valores predeterminados	describir
idioma	Cadena	‘en’	Configuración de varios idiomas, debe importar los archivos de idioma correspondientes en la carpeta local con anticipación cuando la use, chino zh, los archivos de idioma importados deben colocarse después de fileinput.js
Mostrar subtítulo	booleano	verdadero	Ya sea para mostrar el perfil del archivo seleccionado
mostrarExplorar	booleano	verdadero	Ya sea para mostrar el botón de exploración
Mostrar vista previa	booleano	verdadero	Ya sea para mostrar el área de vista previa
mostrarQuitar	booleano	verdadero	Ya sea para mostrar el botón Eliminar
mostrarSubir	booleano	verdadero	Ya sea para mostrar el botón de carga
mostrarCancelar	booleano	verdadero	Ya sea para mostrar el botón de cancelar
mostrarCerrar	booleano	verdadero	Ya sea para mostrar el botón de cerrar
mostrar SubidoThumbs	booleano	verdadero	Este atributo se basa en dicho método de uso: seleccione varios archivos y haga clic en el botón de carga en la esquina inferior derecha para cargar en lotes, y luego seleccione un lote de archivos después de que todos estén completos. En este momento, si desea guardar los archivos que se cargaron con éxito antes. Es esta propiedad la que lo controla. Tenga en cuenta que hacer clic en el botón de carga debajo de la miniatura del archivo no hará que desaparezca el archivo anterior que se cargó correctamente, incluso si se establece true aquí.
examinarOnZoneClick	booleano	FALSO
Reemplazo automático	booleano	FALSO	Ya sea para reemplazar automáticamente la imagen actual, cuando se establece en verdadero, seleccione el archivo nuevamente, el archivo actual será reemplazado.
generar ID de archivo	Objeto	nulo
vista previa de la clase	Cadena	nulo	Agregar un atributo de clase para el botón de vista previa
captionClass	Cadena	nulo	Agregar atributo de clase de título
frameClass	Cadena	'krajee-predeterminado'	marco para cada miniatura
clase principal	Cadena	'archivo-título-principal'	Para atributos de clase de elemento
Plantilla principal	Objeto	nulo
purificarHtml	booleano	verdadero
FileSizeGetter	Objeto	nulo
título inicial	Cadena	nulo
vista previa inicial	Matriz/Objeto	[]	A través de este parámetro, podemos establecer algunas miniaturas predeterminadas para el área del archivo.
initialPreviewDelimiter	Cadena	'$$'
vista previa inicial como datos	booleano	FALSO
tipo de archivo de vista previa inicial	Cadena	'imagen'
matriz/objeto initialPreviewConfig	[]
initialPreviewThumbEtiquetas	Matriz/Objeto	[]
vista previaThumbTags	Objeto	{}
vista previa inicialMostrarEliminar	booleano	verdadero
removeFromPreviewOnError	booleano	FALSO
eliminar URL	Cadena	nulo	Solicitar ruta al eliminar imágenes
borrarExtraData	Objeto	{}	Se pasan parámetros adicionales al eliminar imágenes
sobrescribirInicial	booleano	verdadero
vista previaZoomBotónIconos	Objeto {anterior: ”,siguiente: ”,toggleheader: ”,pantalla completa: ”,sin bordes: ”,cerrar: ”},
vista previaZoomButtonClasses	Objeto	{prev: ‘btn btn-navigate’,next: ‘btn btn-navigate’,toggleheader: ‘btn btn-default btn-header-toggle’,fullscreen: ‘btn btn-default’,borderless: ‘btn btn-default’,close: ‘btn btn-default’},
preferIconicPreview	Boolean	false
preferIconicZoomPreview	Boolean	false
allowedPreviewTypes	undefined	undefined
allowedPreviewMimeTypes	Object	null
allowedFileTypes	Object	null	接收的文件后缀，如[‘jpg’, ‘gif’, ‘png’],不填将不限制上传文件后缀类型
allowedFileExtensions	Object	null	指出带有哪些后缀名的文件才是被接受上传的，设置msgInvalidFileExtension
defaultPreviewContent	Object	null
customLayoutTags	Object	{}
customPreviewTags	Object	{}
previewFileIcon	String	空	当文件无法被预览时出现在缩略图中的图标，默认是
previewFileIconClass	String	‘file-other-icon’
previewFileIconSettings	Object	{}	可以将不同的后缀的文件有不同的缩略图图标
previewFileExtSettings	Object	{}
buttonLabelClass	String	‘hidden-xs’
browseIcon	String	空
browseClass	String	‘btn btn-primary’	指出了右下角选择按钮的样式。一般尽量不要用btn-sm和btn-lg，会和左边的输入框不协调
removeIcon	String	空	删除按钮相关的属性
removeClass	String	‘btn btn-default’
cancelIcon	String	空
cancelClass	String	‘btn btn-default’
uploadIcon	String	空	上传按钮相关的属性
uploadClass	String	‘btn btn-default’
uploadUrl String	null	上传文件路径
uploadAsync	boolean	true	是否为异步上传
uploadExtraData	Object	{}	上传文件时额外传递的参数设置
zoomModalHeight	number	480
minImageWidth	String	null	图片的最小宽度
minImageHeight	String	null	图片的最小高度
maxImageWidth	String	null	图片的最大宽度
maxImageHeight	String	null	图片的最大高度
resizeImage	Boolean	false
resizePreference	String	‘width’
resizeQuality	number	0.92
resizeDefaultImageType	String	‘image/jpeg’
minFileSize	number	0	单位为kb，上传文件的最小大小值
maxFileSize	number	0	单位为kb，如果为0表示不限制文件大小
resizeDefaultImageType	number	25600(25MB)
minFileCount	number	0	表示同时最小上传的文件个数
maxFileCount	number	0	表示允许同时上传的最大文件个数
validateInitialCount	Boolean	false
msgValidationErrorClass	String	‘text-danger’
msgValidationErrorIcon	String	空
msgErrorClass	String	‘file-error-message’
progressThumbClass	String	“progress-bar progress-bar-success progress-bar-striped active”
rogressClass	String	“progress-bar progress-bar-success progress-bar-striped active”
progressCompleteClass	String	“progress-bar progress-bar-success”
progressErrorClass	String	“progress-bar progress-bar-danger”
progressUploadThreshold	number	99
previewFileType	String	‘image’	预览文件类型,内置[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’,‘other‘]等格式
elCaptionContainer	String	null
elCaptionText	String	null	设置标题栏提示信息
elPreviewContainer	String	null
elPreviewImage	String	null
elPreviewStatus	String	null
elErrorContainer	String	null
errorCloseButton	String	×’
slugCallback	function	null	选择后未上传前 回调方法
dropZoneEnabled	Boolean	true	是否显示拖拽区域
dropZoneTitleClass	String	‘file-drop-zone-title’	拖拽区域类属性设置
fileActionSettings	Object	{}	设置预览图片的显示样式
otherActionButtons	String	空	编码设置
textEncoding	String	‘UTF-8’
ajaxSettings	Object	{}
ajaxDeleteSettings	Object	{}
showAjaxErrorDetails	Boolean	true

（二）Method 方法介绍

方法名	描述
fileerror	异步上传错误结果处理$(‘#uploadfile’).on(‘fileerror’, function(event, data, msg) {});
fileuploaded	异步上传成功结果处理$(“#uploadfile”).on(“fileuploaded”, function (event, data, previewId, index) {})
filebatchuploaderror	批量上传错误结果处理$(‘#uploadfile’).on(‘filebatchuploaderror’, function(event, data, msg) {});
filebatchuploadsuccess	批量上传成功结果处理$(‘#uploadfile’).on(‘filepreupload’, function(event, data, previewId, index) {});
filebatchselected	选择文件后处理事件$(“#fileinput”).on(“filebatchselected”, function(event, files) {});
upload	文件上传方法$(“#fileinput”).fileinput(“upload”);
fileuploaded	上传成功后处理方法$(“#fileinput”).on(“fileuploaded”, function(event, data, previewId, index) {});
filereset	Possible values: http, https, ws, wss.
fileclear	点击浏览框右上角X 清空文件前响应事件$(“#fileinput”).on(“fileclear”,function(event, data, msg){});
filecleared	点击浏览框右上角X 清空文件后响应事件$(“#fileinput”).on(“filecleared”,function(event, data, msg){});
fileimageuploaded	在预览框中图片已经完全加载完毕后回调的事件

事件案例：filepreremove 在删除前触发事件 fileremoved在删除触发事件 调用通过on调用

$("#fileinputid").on("fileremoved", function (event, key, key2, data) {
    
    
    getMeg();
});

文件批量被选择后触发 （常用功能 选择完成后调用上传功能upload）。

 $("#fileinputid").on('filebatchselected', function (event, data) {
    
    

        $("#fileinputid").fileinput("upload");
        //选择完成后主动上传

   });

自定义事件： 在源码定义位置使用self._raise(‘filepreremove’, [id, ind]);
filepremove 表示方法名 后面是参数数组 传两个参数 。无参数空数组即可。
对外可用方法：启用缩略图上删除功能方法 通过fileinput(方法名)启用：
$(“#fileinputid”).fileinput(‘_initFileActions’);//这行代码绑定删除remove事件的 无ajax $(“#fileinputid”).fileinput(‘_initPreviewActions’);//这行代码绑定删除delete事件的 ajax
_initFileActions 是remove _initPreviewActions 是delete 不一样 一般使用第一种
upload 方法 调用后上传选择的图片。
clear 清除方法 清除非initpreview的文件
reset 清除方法 清除所有文件

二、增加页面的文件上传

（一）bootstrap-fileinput文件上传功能

1.先引入js依赖

<th:block th:include="include :: bootstrap-fileinput-css" />

<th:block th:include="include :: bootstrap-fileinput-js" />

2.在html上面写入文件框

<div class="file-loading">
     <input id="singleFile" name="file" type="file" >
</div>

（二）根据若依给出的示例引用和改进

1.直接引用若依框架所给的js代码，这个代码不管是不是若以框架都可以使用。

//这里直接用js的ready方法，就是说等这个页面全部加载完之后就去执行写入的js
$(document).ready(function(){
    
    
            //单文件上传
            $("#singleFile").fileinput({
    
    
                uploadUrl: prefix + "/upload",//文件的上传路径，与后端一致，其中prefix为var prefix = ctx + "common/gongcheng";即你的后台的引用路径
                language: 'zh',//设置语言
                allowedFileExtensions:['image', 'html', 'text', 'video', 'audio', 'flash', 'object','png','jpg','db','txt','pdf'],//允许上传的文件类型，错误会给出提示
                dropZoneTitle: '可以将文件拖放到这里,支持文件上传',
                maxFileCount: 1,//最多上传几个文件
                autoReplace: true//自动替换
            //此功能为自动上传文件，即选择完文件后自动上传，小白可以先不用直接省略掉这部分代码    
            }).on('filebatchselected',function(event,data,previewId,index){
    
    
                $(this).fileinput("upload");
                document.getElementById('fjid').value = rsp.fjid;
                log.info("return url:" + rsp.url)
                log.info("return fileName:" + rsp.fileName)
                log.info("return newFileName:" + rsp.newFileName)
                log.info("return originalFilename: " + rsp.originalFilename)
            //建议小白先使用这个方法进行练手    
            }).on('fileuploaded',function(event,data,previewId,index) {
    
    
            	//获取到后端传过来的json数据，我的里面包含着一个map集合
                var rsp = data.response;
                //这里我用了一个隐藏域接收了从后端map集合里的一个fjid属性，根据id进行赋值操作
                document.getElementById('fjid').value = rsp.fjid;
                log.info("return url:" + rsp.url)
                log.info("return fileName:" + rsp.fileName)
                log.info("return newFileName:" + rsp.newFileName)
                log.info("return originalFilename: " + rsp.originalFilename)
            }).on('fileremoved',function (event, id, index){
    
    
                $("input[name='" + event.currentTarget.id +"']").val('')
            })
        });

2.后台所需要的实体类
我这个是在工程页面传入一个文件，所以会有两个实体类，一个是工程实体类，一个是附件实体类，我的实现逻辑是先传入文件，然后得到一个文件id，把这个id传到add页面的隐藏域中，然后后台在添加时调用隐藏域传递过来的id，根据文件id增加文件跟工程实体类的glid。
这个是我的隐藏域所传的值：

<input type="hidden" name="fjid" id="fjid">

在文件upload方法里面把fjid这个属性赋值，把后台传过来的付给他

 }).on('fileuploaded',function(event,data,previewId,index) {
    
    
                var rsp = data.response;
                document.getElementById('fjid').value = rsp.fjid;

然后后台调用增加方法

（三）根据uploadUrl进行上传

/**
     * 资料上传请求(单个)
     * @return 集合
     */
    @PostMapping("/upload")
    @ResponseBody
    public AjaxResult uploadFile(MultipartFile file) throws Exception {
    
    
        try {
    
    
            // 上传文件路径
            String filePath = RuoYiConfig.getUploadPath();
            // 上传并返回新文件名称
            String fileName = FileUploadUtils.upload(filePath, file);
            //获取文件的上传路径
            String url = serverConfig.getUrl() + fileName;
            //得到文件的文件名
            String[] split = fileName.split("/");
            //
            String fname = split[split.length - 1];
            //新建一个附件类，把以下的数据赋值给它
            PmsFujian pmsFujian = new PmsFujian();
            //设置文件的路径
            pmsFujian.setUrl(url);
            //设置文件的name
            pmsFujian.setName(fname);
            //设置文件的大小
            pmsFujian.setCssize(file.getSize());
            //设置文件的原始文件名称，即上传的文件名称
            pmsFujian.setCsname(file.getOriginalFilename());
            //设置文件所属的工程模块
            pmsFujian.setMkmc("工程资料");
            //调用文件的新增方法，添加到数据库
            pmsFujianService.insertPmsFujian(pmsFujian);
            //再添加到数据库后，得到了文件的id
            String fjid = pmsFujian.getFjid();
            //创建一个ajax结果，这个ajax继承map集合，相当于一个map集合
            AjaxResult ajax = new AjaxResult();
            ajax.put("url",url);
            ajax.put("name", fname);
            ajax.put("fjid",fjid);
            ajax.put("fileName", fileName);
            返回map集合，也就是前端页面中rsp.data的数据
            return ajax;
        } catch (Exception e) {
    
    
            return AjaxResult.error(e.getMessage());
        }
    }

运行完这个方法以后，已经把文件增加到了数据库，此时文件的数据库都有值，把文件的id添加到ajax集合，返回到前端页面，利用

}).on(‘fileuploaded’,function(event,data,previewId,index) {
    
    
var rsp = data.response;
document.getElementById(‘fjid’).value = rsp.fjid;

赋值给fjid，传到工程增加的controller层

/**
     * 新增保存工程
     */
    @RequiresPermissions("common:gongcheng:add")
    @Log(title = "工程", businessType = BusinessType.INSERT)
    @PostMapping("/add")
    @ResponseBody
    public AjaxResult addSave(PmsGongcheng pmsGongcheng,String fjid) throws IOException {
    
    
        return toAjax(pmsGongchengService.insertPmsGongcheng(pmsGongcheng,fjid));
    }

其中，pmsGongchengService.insertPmsGongcheng(pmsGongcheng,fjid)中的操作为

 /**
     * 新增工程
     * 
     * @param pmsGongcheng 工程
     * @return 结果
     */
    @Override
    public int insertPmsGongcheng(PmsGongcheng pmsGongcheng,String fjid,String jcfa)
    {
    
     
    	//先进行工程的增加	
    	int i =  pmsGongchengMapper.insertPmsGongcheng(pmsGongcheng);
    	//判断是否有文件上传，如果有文件上传，执行下步操作
    	if (!fjid.isEmpty()) {
    
    
    	//获取工程的id
            String gcid = pmsGongcheng.getGcid();
            //根据文件的id拿到在数据库中的那条文件数据
            PmsFujian pmsFujian = pmsFujianMapper.selectPmsFujianByFjid(fjid);
            //把文件数据中的glid属性赋值
            pmsFujian.setGlid(gcid);
            //更新文件数据库中的这条信息
            pmsFujianMapper.updatePmsFujian(pmsFujian);
        }
        return i;
    }     

（四）完成效果图

三、编辑(修改)界面文件的上传，回显，删除(数据库同时删除)的操作 )

（一）编辑界面文件的上传

这个跟add界面的文件上传大同小异

1.首先引入js

<th:block th:include="include :: bootstrap-fileinput-css"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>

2.引入标签

<div class="file-loading">
      <input id="singleFile" name="file" type="file">
</div>

引入隐藏域

<input type="hidden" name="fjid" id="fjid">

3.引入js

<!--资料的实现-->
        //单文件上传

        $(document).ready(function(){
    
    
            $("#singleFile").fileinput({
    
    
                uploadUrl: prefix + "/upload",//文件上传路
                dropZoneTitle: '可以将文件拖放到这里,支持文件上传',
                language: 'zh',
                allowedFileExtensions: ['bmp', 'gif', 'jpg', 'jpeg', 'png', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx','html', 'htm', 'txt', 'text','rar', 'zip', 'gz', 'bz2', 'pdf', 'bpmn', 'bar','db'],
                showUpload: true,//是否显示上传按钮
                showRemove : true, //显示移除按钮
                showPreview : true, //是否显示预览
                showCaption: false,//是否显示标题
                fileSizeGetter: true,
                previewFileType: ['image','txt','text'],
                validateInitialCount:true,
                preferIconicPreview: true, // 这将强制缩略图按照以下文件扩展名的图标显示
                maxFileCount: 1,
                autoReplace: true//自动替换
                //下面的自动上传提交，建议先熟悉下面的文件点击上传
            }).on('filebatchselected',function(event,data,previewId,index){
    
    
                $(this).fileinput("upload");
                document.getElementById('fjid').value = rsp.fjid;
                log.info("return url:" + rsp.url)
                log.info("return fileName:" + rsp.fileName)
                log.info("return newFileName:" + rsp.newFileName)
                log.info("return originalFilename: " + rsp.originalFilename)
                //文件上传提交，后台返回数据前台接受
            }).on('fileuploaded',function(event,data,previewId,index) {
    
    
            	//后台返回的数据，是一个json数据，里面是个map集合
                var rsp = data.response;
                //把后台返回的fjid的值赋给隐藏于的fjid属性
                document.getElementById('fjid').value = rsp.fjid;
                log.info("return url:" + rsp.url)
                log.info("return fileName:" + rsp.fileName)
                log.info("return newFileName:" + rsp.newFileName)
                log.info("return originalFilename: " + rsp.originalFilename)
            }).on('fileremoved',function (event, id, index){
    
    
                $("input[name='" + event.currentTarget.id +"']").val('')
            })
        });

后台代码：

/**
     * 资料上传请求（单个）
     * @return
     */
    @PostMapping("/upload")
    @ResponseBody
    public AjaxResult uploadFile(MultipartFile file) throws Exception {
    
    
        try {
    
    
            // 上传文件路径
            String filePath = RuoYiConfig.getUploadPath();
            // 上传并返回新文件名称
            String fileName = FileUploadUtils.upload(filePath, file);
            //获取文件的上传路径
            String url = serverConfig.getUrl() + fileName;
            //得到文件的文件名
            String[] split = fileName.split("/");
            String fname = split[split.length - 1];

            PmsFujian pmsFujian = new PmsFujian();
            pmsFujian.setUrl(url);
            pmsFujian.setName(fname);
            pmsFujian.setCssize(file.getSize());
            pmsFujian.setCsname(file.getOriginalFilename());
            pmsFujian.setMkmc("工程资料");
            pmsFujianService.insertPmsFujian(pmsFujian);
            String fjid = pmsFujian.getFjid();
            AjaxResult ajax = new AjaxResult();
            ajax.put("url",url);
            ajax.put("name", fname);
            ajax.put("fjid",fjid);
            ajax.put("fileName", fileName);
            return ajax;
        } catch (Exception e) {
    
    
            return AjaxResult.error(e.getMessage());
        }
    }

然后调用工程的编辑方法

 /**
     * 修改保存工程
     */
    @RequiresPermissions("common:gongcheng:edit")
    @Log(title = "工程", businessType = BusinessType.UPDATE)
    @PostMapping("/edit")
    @ResponseBody
    public AjaxResult editSave(PmsGongcheng pmsGongcheng,String fjid) {
    
    
        return toAjax(pmsGongchengService.updatePmsGongcheng(pmsGongcheng,fjid));
    }

updatePmsGongcheng 里面的方法执行过程

/**
     * 修改工程
     * 
     * @param pmsGongcheng 工程
     * @return 结果
     */
    @Override
    public int updatePmsGongcheng(PmsGongcheng pmsGongcheng,String fjid,String jcfa)
    {
    
    	//先更新工程数据库中的信息
    	int i =  pmsGongchengMapper.updatePmsGongcheng(pmsGongcheng);
    	//判断是否传入了新文件
    	if (!fjid.isEmpty()) {
    
    
            String gcid = pmsGongcheng.getGcid();
            PmsFujian pmsFujian = pmsFujianMapper.selectPmsFujianByFjid(fjid);
            pmsFujian.setGlid(gcid);
            pmsFujianMapper.updatePmsFujian(pmsFujian);
        }
        return i;
    }

这样就完成了文件上传

（二）编辑界面文件的回显

1.文件的实体类：

 /** 附件主键 */
    private String fjid;
    /** 名称 */
    @Excel(name = "名称")
    private String name;
    /** 路径 */
    @Excel(name = "路径")
    private String url;
    /** 关联主键 */
    @Excel(name = "关联主键")
    private String glid;
    /** 模块名称 */
    @Excel(name = "模块名称")
    private String mkmc;
    /** 文件大小 */
    @Excel(name = "文件大小")
    private String size;
    /** 文件大小（不加计算） */
    @Excel(name = "文件大小", readConverterExp = "不=加计算")
    private Long cssize;
    /** 文件初始名称 */
    @Excel(name = "文件初始名称")
    private String csname;

2.想要回显文件，首先要在工程类(你的编辑界面的主类)里面关联文件类

public class PmsGongcheng extends BaseEntity {
    
    
/**
    * 附件类 xyh
    * */
    private List<PmsFujian> pmsFujian;
    ...生成你的get，set方法和你的tostring

xml中使用collection标签

<collection property="pmsFujian"  column="fjid" ofType="com.lrkj.pms.ztjg.common.domain.PmsFujian" resultMap="PmsFujianResult"/>

在主类的xml文件引入文件的sql

<resultMap type="com.lrkj.pms.ztjg.common.domain.PmsFujian" id="PmsFujianResult">
        <result property="fjid"    column="fjid"    />
        <result property="name"    column="name"    />
        <result property="url"    column="url"    />
        <result property="glid"    column="glid"    />
        <result property="mkmc"    column="mkmc"    />
        <result property="size"    column="size"    />
        <result property="cssize"    column="cssize"    />
        <result property="csname"    column="csname"    />
        <result property="createTime"    column="create_time"/>
        <result property="remark"    column="remark"    />
    </resultMap>

3.进行文件的回显

1.首先文件的回显需要这几个东西：

initialPreview: initialPreview,
initialPreviewConfig: initialPreviewConfig,
initialPreviewAsData: true, // 默认为数据

上面的bootstrap-fileinput文件控件里面自带的属性，把这三个属性放到$(“#singleFile”).fileinput({}）里面

2.编写js代码，实现initialPreview和initialPreviewConfig的实现逻辑：

var pmsFujian = [[${
    
    pmsGongcheng.pmsFujian}]];

            var initialPreview = [];

            var initialPreviewConfig = [];

            if(pmsFujian[0].fjid == null){
    
    
                pmsFujian = [];
            }
            if(pmsFujian != null && pmsFujian != ''){
    
    
                for(var i = 0;i<pmsFujian.length;i++) {
    
    
       				var Fujian = pmsFujian[i];
                    if(Fujian != null && Fujian !=''){
    
    
                        var delFujian = new Object();
                        delFujian = generFilDel(Fujian);
                        //把文件的路径传到这个数组里面
                        initialPreview.push(Fujian.url);
                        //把文件的信息传到这个数组里面
                        initialPreviewConfig.push(delFujian);
                    }
                }
            }
//这个是判断文件属性的配置类，包含了文件的各种属性，其中url是文件的删除路径，必须要写入，与后台删除路径保持一致，key是文件删除时带到后台的ajax数据，在后台接收的是key不是fjid
            
function generFilDel(file) {
    
    
    if(file != null && file != ''){
    
    
        var type = file.url.substr(file.url.lastIndexOf('.') + 1);
        if(type=='pdf'){
    
    
				return {
    
    type: "pdf", size: file.cssize, caption: file.csname, url:prefix + "/deletePic", key: file.fjid, downloadUrl:file.url};
	    }else if(type=='text'){
    
    
				return {
    
    caption: file.csname, type: "text", size: file.cssize, url:prefix + "/deletePic", key: file.fjid , downloadUrl:file.url};
		}else if(type=='mp4'){
    
    
				return  {
    
    type: "video", size: file.cssize, filetype: "video/mp4", caption: file.csname, url:prefix + "/deletePic", key: file.fjid , downloadUrl:file.url};
		}else if(type=='txt'){
    
    
				return  {
    
    type: "txt", size: file.cssize, caption: file.csname, url:prefix + "/deletePic", key: file.fjid , downloadUrl:file.url};
		}else if(type=='db'){
    
    
				return  {
    
    type: "db", size: file.cssize, caption: file.csname, url:prefix + "/deletePic", key: file.fjid , downloadUrl:file.url};
	    }else{
    
    
				return	{
    
    caption: file.csname, size: file.cssize, url: prefix + "/deletePic", key: file.fjid};
			  }
		}
     }

此时，就完成了文件的回显：

回显的预览界面：

（三）文件的删除

文件删除直接调用bootstrap里面的filesuccessremove方法

on('filesuccessremove',function(event,data,previewId,index){
    
    
			    for (var i = 0; i < pmsFujian.length; i++) {
    
    
                    if (pmsFujian[i].fjid == data) {
    
    
                    delete pmsFujian[i];
                    }
                  }

因为咱们在initialPreviewConfig传入了删除路径和删除时所带的文件id，所以先配置好js代码：

$("#singleFile").fileinput({
    
    
//添加文件的删除路径
                deleteUrl: prefix + "/deletePic",

后台代码：

/**
     *删除文件
     *
     */
    @PostMapping("/deletePic")
    @ResponseBody
    //传入从前台过来的key
    public AjaxResult delete(String key){
    
    
        return toAjax(pmsFujianService.deletePmsFujianByFjid(key));
    }

这样就实现了前端实现文件移除时后端也删除了文件数据库中对应的文件信息