element imgbox

elemento-imgbox

Complemento de exploración y carga de imágenes basado en Vue y element-ui
El componente de carga y selección de imágenes basado en Vue y element-ui admite modos de componente y complemento.

Ejemplo

• Cargar folleto en modo componente
• Cargar varias imágenes en modo componente
• Subir folletos a través del complemento
• Cargue varias imágenes a través del complemento

vista previa local

git clone https://github.com/erzh/element-imgbox.git
cd element-imgbox
cnpm i
npm run dev

requerir

• Vista 2.5+
• elemento-ui 2+
• ejes 0.21+

accesorios

 {
  action: String, // 图片上传URL
  list-url: String, // 图片列表数据URL
  multiple: {type: Boolean, default: true},  // 是否支持选取多个图片
  enable-upload: {type: Boolean, default: true}, // 是否启用图片上传，不启用则只显示图片选取器
  limit: {type: Number, default: 10}, // 最多可选择图片数量
  max-size: {type: Number, default: 2},  // 最大尺寸（M）
  with-data: {type: Object, default: null},  // 上传时附带的额外参数
  with-credentials: {type: Boolean, default: true}, // 支持发送 cookie 凭证信息
  headers: {type: Object, default: null}, // 设置上传的请求头部	Object
}

enlace de datos

Acerca de subir

• Admite la selección de un solo archivo y varios archivos;
• Después de seleccionar el archivo, debe hacer clic en "Confirmar carga" para comenzar a cargar la imagen;
• Siempre que una imagen se cargue correctamente, se llamará a la devolución de llamada y se cerrará la ventana de carga.
• Se produjo un error en el mensaje ELEMENT.Message.error()

datos interactivos

Cargar formato de datos de devolución

Subida exitosa:

{
  "success" : true ,
  "item" : {
    "name" : "图片名" ,
    "thumb" : "图片缩略图链接" ,
    "url" : "图片URL " ,
    "你需要的其他属性" : "其他属性值"
  }
}

La carga falló:

{
  "message" : "错误信息"
}

Formato de datos de lista

{
  "items" :[
    {
      "name" : "图片名" ,
      "thumb" : "图片缩略图URL " ,
      "url" : "图片URL " ,
      "label" : "图片长x宽" ,
      "你需要的其他属性" : "其他属性值"
    }
  
  ],
  "total" : "总图片数"
}

localización

Configure la variable js ELX_IMGBOX_LANG y cubra los siguientes elementos para lograr la localización.

 const ELX_IMGBOX_LANG = {
  confirm : '确定' ,
  conform_upload : '确定上传' ,
  image_manager : '图片管理器' ,
  pick_image : '选择图片' ,
  upload_image : '上传图片' ,
  upload_num_limit : '当前最多只能选择 {0} 张图片' ,
  server_no_response : '服务器打了个盹^_^' ,
  upload_type_limit : '仅支持上传 jpg/png/gif 图片' ,
  upload_size_limit : '大小不能超过' ,
  selected_num : '已有选择 {0} 张图片。' ,
  uploading_image_num : '即将上传 {0} 张图片。' ,
  can_upload_num : '还可以选择 {0} 张图片上传' ,
  pick_local_image_tip : '请选择本地图片上传'
}