yqy-upload组件是基于耀企云库项目2次开发的一个上传图片组件

安装yqy-upload

命令行进入项目根目录执行下面命令，安装最新稳定版，当然你也可以指定版本号安装对应版本

$ npm install yqy-upload

在项目中引入并使用 yqy-upload 组件

在 main.js 中写入以下内容:

// 当前位置 main.js

import Vue from 'vue'
import yqyUpload from 'yqy-upload'
import App from './App.vue'

Vue.use(yqyUpload)

new Vue({
  el: '#app',
  render: h => h(App)
})

在页面中使用

由于在 main.js 入口文件出全局引入并启用了 yqyUpload 组件，所以在项目下所有的 vue 页面中, 都可以直接使用。

<yqy-upload
  v-for="(item, key) in uploadImageObj"
  :key="key"
  :param="key"
  :image.sync="item.image"
  :name="item.certificate_name"
  :API_URL="API_URL"
  :accessToken="accessToken"
  class="upload-item"
  @listenToChildEvent="getUploadInfo"
></yqy-upload>

属性

accessToken

必传 类型 String 描述：用户登录后的token，用于上传接口

API_URL

必传 类型 String 描述：当前api的环境

name

必传 类型 String 描述：上传组件的名称展示

image

非必传 类型 String 描述：上传组件的图片展示

param

非必传 类型 String 描述：如果传了该字段，则返回@listenToChildEvent方法，此方法中返回了当前上传的参数

lookover

非必传 类型 Boolean 描述：是否只需要查看功能（传了该字段，则不显示上传功能，有图片时渲染，无图片时隐藏）

@listenToChildEvent

类型 Function 描述：返回当前上传可提交给后端的参数，示例：{ 'yljg_certificate': '/company/image/0/20210430104154_0_4226.jpeg' }

调用参数参考（对象中的key就是需要上传给后端的key）

this.uploadImageObj = {
  license_certificate: {certificate_name: '营业执照'},
  ypjy_certificate: {certificate_name: '药品经营许可证'},
  ylqx_certificate: {certificate_name: '医疗器械经营许可证'},
  spjy_certificate: {certificate_name: '食品经营许可证'},
  yljg_certificate:{certificate_name: '医疗机构执业许可证'},
  gsp_certificate: {certificate_name: 'GSP'},
  legal_person_idcard: {certificate_name: '法人身份证'},
  proxies: {certificate_name: '委托书'}
}