element imgbox

要素-imgbox

Vue と element-ui に基づいた画像の参照とアップロードのプラグイン
Vue と element-ui に基づく画像の選択とアップロード コンポーネントは、コンポーネント モードとプラグイン モードの両方をサポートします。

例

• リーフレットをコンポーネントモードでアップロードする
• コンポーネントモードで複数の画像をアップロードする
• プラグイン経由でチラシをアップロードする
• プラグイン経由で複数の画像をアップロード

ローカルプレビュー

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

必要とする

• Vue 2.5+
• エレメントUI 2+
• アクシオス 0.21+

小道具

 {
  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
}

データバインディング

アップロードについて

• 単一ファイルと複数ファイルの選択をサポートします。
• ファイルを選択した後、「アップロードの確認」をクリックして画像のアップロードを開始する必要があります。
• 1 枚の写真が正常にアップロードされると、コールバックが呼び出され、アップロード ウィンドウが閉じられます。
• エラーが発生しました ELEMENT.Message.error() プロンプト

インタラクティブデータ

アップロードの戻りデータ形式

アップロードが成功しました:

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

アップロードに失敗しました:

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

リストデータ形式

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

ローカリゼーション

js 変数ELX_IMGBOX_LANGを設定し、次の要素をカバーしてローカライズを実現します。

 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 : '请选择本地图片上传'
}