VUE画像のアップロード

機能：

1、カメラ付き携帯電話を呼び出します

2、アルバム機能を呼び出します

3、画像アップロード機能

図4に示すように、画像プレビュー機能

5、画像削除機能

レコードマルチマップのアップロードコンポーネント、キーポイント：
1、INPUTは、複数の追加
2は、IOSと受け入れ=「イメージ/ *契約は、Android携帯電話は、カメラ有効
createObjectURL処理画像プレビューによれば、3
4、FORMDATAコンストラクタは空のオブジェクト作成
FORMDATAによって5 .getAll（）、ファイルストリームデータアレイに

コンポーネントの例図。

コンポーネントのコードupload_img.vue

<テンプレート> 
  の<div クラス = " コンテンツ" > 
    <divのクラス = " IMGBOX " > 
      <divのクラス = " uploadBox " V- 用 = " IMGSで（値、キー）"：キー= " 'uploadBox' +キー" > 
        <IMG：SRC = " getObjectURL（値）" ALT = ""  クラス = " uploadImg " >
        <IMG SRC = "../../assets/images/icon_x.png " ALT = ""  クラス = " closeImgを" @クリック= ' delImg（キー）' > 
      </ div> 
      <divのクラス = " inputButton " > 
      <IMG SRC = " ../../assets/images/icon_photo.png " ALT = ""  クラス = " addImg " > 
        の<input type = " ファイル"  クラス = " アップロード"変更= @ " addImg"  REF = " inputer " 複数
          受け入れる = " 画像/ * " /> 
      </ div> 
      <divのクラス = " submitTask " =]をクリックします@ " 提出" > 
        上传图片
       </ DIV> 
    </ DIV> 
  </ DIV> 
</テンプレート>

JS：

輸出のデフォルト（{ 
  名：' uploadPicture ' 、
  データ：機能（）{ 
    リターン{ 
      FORMDATA：新しいいるFormData（）、
      IMGS：{}、
      imgLen：0 、
      txtVal：0 、
      DESC：'' 

    } 
  }、
  作成しました（）{ 

  } 、
  メソッド：{ 
    descInput（）{ 
      // this.txtVal = this.desc.length; 
    }、
    addImg（イベント）{ 
      inputDOMせ = この$ refs.inputer。
       //とることによりDOMファイルデータ
      この .fil = inputDOM.files
       // にconsole.log（inputDOM.files） 
      しましょうoldLen = この.imgLen
       のために（聞かせて私は= 0 ; I < この .fil.lengthを; I ++ ）{ 
        letのサイズ =数学を.floor（この .fil [I] .size / 1024 ）
         IF（サイズ> 5 * 1024 * 1024 ）{ 
          アラート（' 5M内の画像を選択！' ）
           リターン 偽へ
        } 
        この .imgLen ++
        この。$ 設定（この .imgs、この .fil [I] .nameの+ ' ？' + 新しい日付（）。getTime（）+ I、この.fil [i]）と
         // はconsole.log（this.imgs）
      } 
      はconsole.log（' this.fil '、この.fil）
       // this.imgs = this.fil 
    }、
    getObjectURL（ファイル）{ 
      VARのurl = nullの
      場合（window.createObjectURL！==は未定義）{ // 基本 
        URL = window.createObjectURL（ファイル） 
      } 他の 場合（window.URL！==未定義）{ // モジラ（Firefoxの） 
        URL = window.URL.createObjectURL（ファイル）
      } 他の 場合は {（window.webkitURL！==は未定義）// のWebKitやクロム 
        URL = ウィンドウ。 webkitURL.createObjectURL（ファイル）
      } 
      の戻りURL 
    }、
    delImg（キー）{ 
      これは。$（削除この.imgs、キー）を
       この .imgLen-- 
    }、
    // 提交上传图片
    （提出）{
       のために（キーみようでは これを。 IMGS）{ 
        LET名 = key.split（"？'）[ 0 ]
         この .formData.append（' ファイル'、この.imgs [キー]）
      } 
      この .formData.getAll（' ファイル' ）
      はconsole.log（" this.formData "、この.formData）
       この。$ refund.upload（この.formData）
    } 
  } 
}）
 </スクリプト>

説明：

画像のアップロードが完了したら、getObjectURLプロセスを作るために、プレビュー機能を使用します。

ヒント：

formData.getAllは、最終的には、配列に返され

スタイル：

<言語のスタイル= " 少ない" >
 // ボックススタイルの外
.content { 
  幅：100％; 
  パディング：0 .16rem 0！重要; 
  .imgBox { 
    表示：フレックス; 
    表示： -webkit- フレックス; 
    フレックス - 方向：行。
    正当化 -content：フレックススタート; 
    ALIGN =左 - アイテムを：センター; 
    フレックス - ラップ：ラップ; 
  } 
} 

// プレビュー画像パターン
.uploadBox { 
  位置：相対; 
  幅：30％。
  テキスト - 整列：左; 
  余白の右回転：0 .1rem。
  マージン -bottom：0 .05rem。
  // 预览样式
  .uploadImg { 
    幅：100％。
    高さ：100％; 
    表示ブロック; 
    オーバーフロー：隠されました; 
  } 
  // 删除按钮
  .closeImg { 
    幅：0 .2rem。
    高さ：0 .2rem。
    位置：絶対; 
    トップ：2％に。
    右：1％; 
  } 
} 
// アイコン図形画像
.inputButton { 
  位置：相対; 
  表示：ブロック; 
  幅：1。.2rem; 
  高さ：1 .2rem;
   // フォトスタイル
  .addImg { 
    表示：ブロック; 
    幅：1。.2rem ; 
    高さ：1。.2rem; 
  } 
  // INPUTスタイル
  .upload { 
    幅：1 .2rem; 
    高さ：1。.2rem; 
    不透明度：0 ; 
    位置：絶対; 
    トップ：0 。
    左：0 ; 
    Z -index：100 。
  } 
} 
// 提交按钮
.submitTask { 
    マージン：自動。
    背景：＃EF504D。
    幅：30％; 
    高さ：0 .3rem。
    色：#FFF; 
    フォント -size：0 .16rem。
    ライン -height：0 .3rem。
    テキスト - 整列：センター; 
    ボーダー -radius：0 .1rem。
    マージン -top：0 .8rem。
}
 </スタイル>

公共の数字、さらに技術交流へようこそ注意：

機能：

コンポーネントの例図。

コンポーネントのコードupload_img.vue

JS：

スタイル：

おすすめ