使用方式

在 script 中引用组件

  1. import ImagePicker from '@/components/image-picker.vue';
  2. export default {
  3.     components: {
  4.         ImagePicker
  5.     },
  6.     methods: {
  7.        upSuccess(res) {
  8.          // 选择完成图片回调返回 res.file 就是上传成功后端返回来的图片路径
  9.           this.form.image = res.file;
  10.         }
  11.     }
  12. }

在 template 中使用组件

  1. <image-picker ref="imgPicker" :count="1" @success="upSuccess"></image-picker>

组件属性

属性名 类型 默认值 说明
hide String 暂无数据 特殊用法 比如上传头像，首页用该属性隐藏不显示组件，再通过手动绑定事件通ref去触发上传组件内部的ChooseImage()方法
count String, Number 4 最多可上传多少张图片
index String, Number 0 由父组件传入，传给父组件用， 组件标识
column String, Number 4 和 grid 的clumn一样，每行多少列
text String ‘’ 上传按钮下放文字

上传头像用法示例：

  1. <image @click="openUpload" class="block wh100 radius50" :src="avatar"></image>
  2. <image-picker :hide="true" ref="imgPicker" :count="1" @success="upSuccess"></image-picker>

在 script 中引用组件

  1. import ImagePicker from '@/components/image-picker.vue';
  2. export default {
  3.     components: {
  4.         ImagePicker
  5.     },
  6.     data() {
  7.         return {
  8.            avatar: '/static/images/default-tx.png',//默认头像
  9.         }
  10.     },
  11.     methods: {
  12.        openUpload() {
  13.            // 这样就打开了选择上传图片的窗口
  14.            this.$refs.imgPicker.ChooseImage()
  15.        },
  16.        upSuccess(res) {
  17.          // 选择完成图片回调返回 res.file 就是上传成功后端返回来的图片路径
  18.           this.avatar = res.file;
  19.         }
  20.     }
  21. }