参考地址
插件 github 地址

装包

  1. npm install bootstrap-fileinput bootstrap --save

演示 gif 因为接口的原因失败了，但是并不影响示例的过程

Animation37.gif

示例源码

  • vue -> template 部分代码 ```
    样图
    样图
    样图 
  2. - `.vue -> script`  部分代码，上面 data 便不展示了，这里重点演示的是自动上传的代码 里面有详细的参数配置定义

import $ from ‘jquery’ require(‘bootstrap-fileinput/js/fileinput.js’) // 引入图片上传插件 input 的逻辑全部都写在了这个文件内部了 需要注意！！！ require(‘bootstrap-fileinput/js/locales/zh.js’) // 引入图片插件的汉化包 require(‘bootstrap-fileinput/themes/fa/theme.js’) // 引入主题包 require(‘bootstrap/dist/js/bootstrap.js’) // 引入 bootstrap

// export default{} 的代码片段 data(){ return{ // 图片上传接口 imgUploadAPI: ‘xxx’ } }

mounted:{ // 初始化图片上传控件 me.initInputFile($(‘input.file[type=file]’), me.imgUploadAPI) }

methods:{ // 初始化图片上传控件 initInputFile: function(eles, posturl) { const me = this let $input = eles if ($input.length) { $input .fileinput({ /**

  1.          * theme icon 主题 需要引入相应的主题包
  2.          * language 语言设置 需要引入相应的语言包
  3.          * uploadUrl 上传路径
  4.          * showCaption 是否展示 input 文字的说明 -- 标题
  5.          * showUpload 是否显示上传按钮
  6.          * showRemove 是否可以删除
  7.          * dropZoneEnabled 是否开启拖拽上传功能
  8.          * maxFileCount 最多的文件数量
  9.          * maxFileSize 最大的尺寸
  10.          * allowedFileExtensions 允许的文件扩展名
  11.          */
  12.         theme: 'fa',
  13.         language: 'zh',
  14.         uploadUrl: posturl,
  15.         showUpload: false,
  16.         showRemove: false,
  17.         dropZoneEnabled: false,
  18.         maxFileCount: 1,
  19.         allowedFileExtensions: ['jpg', 'png', 'gif']
  20.       })
  21.       // 实现图片被选中后自动提交
  22.       .on('filebatchselected', function(event, files) {
  23.         // 选中事件
  24.         $(event.target).fileinput('upload')
  25.       })
  26.       .on('fileuploaded', function(event, data) {
  27.         // 提交成功之后
  28.         let eleID = $(event.target).prop('id')
  29.         // console.log(eleID)
  30.         // 通过 ID 判断给相应的字段赋值
  31.         if (eleID === 'userIDImageFront') {
  32.           // 正面
  33.           me.postData.frontPic = JSON.parse(getData.result).url
  34.         } else if (eleID === 'userIDImageBack') {
  35.           // 背面
  36.           me.postData.reversePic = me.postData.frontPic = JSON.parse(
  37.               getData.result
  38.             ).url
  39.         } else if (eleID === 'userIDSIM') {
  40.           // 手持
  41.           me.postData.handPic = me.postData.frontPic = JSON.parse(
  42.               getData.result
  43.             ).url
  44.         }
  45.       })
  46.   }
  47. },

}

  1. ## 更新
  3. - 问题
  5. > 由于在上传时未在 html 中写 `file` 文件的 `name` 属性值，从而导致数据无法传递
  8. - 解决方法

```

需要注意的是这个 name 属性的值不是随便写的，而是需要与后台写的保持一致，这个需要询问后台定义的参数名称

  • gIf 图演示

Animation45.gif