最终实现的 GIF 效果图
Animation44.gif
资料
正文
需求：在文件上传之后（接口可以正常的访问，只是返回结果是失败的情况下），这个时候需要将原来生成的缩略图清除掉（因为展示的样式会让用户看起来是成功的样子），还要使这个上传空间可以正常的使用（这个我查了好久的资料，用看了源码里的方法，几个方法都试了下最终才成功的）
源码
- js 较上篇笔记扩展的部分
if ($input.length) {
$input
.fileinput({
/**
* theme icon 主题 需要引入相应的主题包
* language 语言设置 需要引入相应的语言包
* uploadUrl 上传路径 可不写在下面与表单一起手动上传
* showCaption 是否展示 input 文字的说明 -- 标题
* showUpload 是否显示上传按钮
* showRemove 是否可以删除
* dropZoneEnabled 是否开启拖拽上传功能
* maxFileCount 最多的文件数量
* maxFileSize 最大的尺寸
* allowedFileExtensions 允许的文件扩展后缀名
* autoReplace 是否自动替换当前图片，设置为true时，再次选择文件， 会将当前的文件替换掉
*/
theme: 'fa',
language: 'zh',
uploadUrl: posturl,
showUpload: false,
showRemove: true,
dropZoneEnabled: false,
maxFileCount: 1,
allowedFileExtensions: ['jpg', 'png'],
autoReplace: true
})
// 实现图片被选中后自动提交
.on('filebatchselected', function(event, files) {
// 选中事件
$(event.target).fileinput('upload')
})
// 异步上传错误结果处理
.on('fileerror', function(event, data, msg) {
// 清除当前的预览图 ，并隐藏 【移除】 按钮
$(event.target)
.fileinput('clear')
.fileinput('unlock')
$(event.target)
.parent()
.siblings('.fileinput-remove')
.hide()
// 打开失败的信息弹窗
me.openAlertModel('请求失败，请稍后重试')
})
// 异步上传成功结果处理
.on('fileuploaded', function(event, data) {
// 判断 code 是否为 0 0 代表成功
const getData = data.response
console.log(getData)
if (getData.code === 0) {
let eleID = $(event.target).prop('id')
// console.log(eleID)
// 通过 ID 判断给相应的字段赋值
if (eleID === 'userIDImageFront') {
// 正面
me.postData.frontPic = JSON.parse(getData.result).url
} else if (eleID === 'userIDImageBack') {
// 背面
me.postData.reversePic = me.postData.frontPic = JSON.parse(
getData.result
).url
} else if (eleID === 'userIDSIM') {
// 手持
me.postData.handPic = me.postData.frontPic = JSON.parse(
getData.result
).url
}
} else {
// 失败回调
// 清除当前的预览图 ，并隐藏 【移除】 按钮
$(event.target)
.fileinput('clear')
.fileinput('unlock')
$(event.target)
.parent()
.siblings('.fileinput-remove')
.hide()
// 打开失败的信息弹窗
me.openAlertModel('请求失败，请稍后重试')
}
})
}
- 总结：
主要使用的
clear和unlock两个插件中定义的方法
