Animation44.gif

资料

某个老哥写的 API 博客
官方方法 API 地址

正文

需求：在文件上传之后（接口可以正常的访问，只是返回结果是失败的情况下），这个时候需要将原来生成的缩略图清除掉（因为展示的样式会让用户看起来是成功的样子），还要使这个上传空间可以正常的使用（这个我查了好久的资料，用看了源码里的方法，几个方法都试了下最终才成功的）

源码

先得看下之前的一篇入门笔记 — 引入插件并实现自动上传功能

  • js 较上篇笔记扩展的部分 ``` if ($input.length) {
    1.   $input
    2.     .fileinput({
    3.       /**
    4.        * theme icon 主题 需要引入相应的主题包
    5.        * language 语言设置 需要引入相应的语言包
    6.        * uploadUrl 上传路径  可不写在下面与表单一起手动上传
    7.        * showCaption 是否展示 input 文字的说明 -- 标题
    8.        * showUpload 是否显示上传按钮
    9.        * showRemove 是否可以删除
    10.        * dropZoneEnabled 是否开启拖拽上传功能
    11.        * maxFileCount 最多的文件数量
    12.        * maxFileSize 最大的尺寸
    13.        * allowedFileExtensions 允许的文件扩展后缀名
    14.        * autoReplace 是否自动替换当前图片，设置为true时，再次选择文件， 会将当前的文件替换掉
    15.        */
    16.       theme: 'fa',
    17.       language: 'zh',
    18.       uploadUrl: posturl,
    19.       showUpload: false,
    20.       showRemove: true,
    21.       dropZoneEnabled: false,
    22.       maxFileCount: 1,
    23.       allowedFileExtensions: ['jpg', 'png'],
    24.       autoReplace: true
    25.     })
    26.     // 实现图片被选中后自动提交
    27.     .on('filebatchselected', function(event, files) {
    28.       // 选中事件
    29.       $(event.target).fileinput('upload')
    30.     })
    31.     // 异步上传错误结果处理
    32.     .on('fileerror', function(event, data, msg) {
    33.       // 清除当前的预览图 ，并隐藏 【移除】 按钮
    34.       $(event.target)
    35.         .fileinput('clear')
    36.         .fileinput('unlock')
    37.       $(event.target)
    38.         .parent()
    39.         .siblings('.fileinput-remove')
    40.         .hide()
    41.       // 打开失败的信息弹窗
    42.       me.openAlertModel('请求失败，请稍后重试')
    43.     })
    44.     // 异步上传成功结果处理
    45.     .on('fileuploaded', function(event, data) {
    46.       // 判断 code 是否为  0    0 代表成功
    47.       const getData = data.response
    48.       console.log(getData)
    49.       if (getData.code === 0) {
    50.         let eleID = $(event.target).prop('id')
    51.         // console.log(eleID)
    52.         // 通过 ID 判断给相应的字段赋值
    53.         if (eleID === 'userIDImageFront') {
    54.           // 正面
    55.           me.postData.frontPic = JSON.parse(getData.result).url
    56.         } else if (eleID === 'userIDImageBack') {
    57.           // 背面
    58.           me.postData.reversePic = me.postData.frontPic = JSON.parse(
    59.             getData.result
    60.           ).url
    61.         } else if (eleID === 'userIDSIM') {
    62.           // 手持
    63.           me.postData.handPic = me.postData.frontPic = JSON.parse(
    64.             getData.result
    65.           ).url
    66.         }
    67.       } else {
    68.         // 失败回调
    69.         // 清除当前的预览图 ，并隐藏 【移除】 按钮
    70.         $(event.target)
    71.           .fileinput('clear')
    72.           .fileinput('unlock')
    73.         $(event.target)
    74.           .parent()
    75.           .siblings('.fileinput-remove')
    76.           .hide()
    77.         // 打开失败的信息弹窗
    78.         me.openAlertModel('请求失败，请稍后重试')
    79.       }
    80.     })
    81. }

```

  • 总结：

主要使用的 clear 和 unlock 两个插件中定义的方法