基於VUE選擇上傳圖片並在頁面顯示（圖片可刪除）

demo例子：

 

依賴文件 ：

 

http://files.cnblogs.com/files/zhengweijie/jquery.form.rar

 

 

 

HTML文本內容：

 

 

<template>
  <div id="accident">
      <div class="wrapper">
        <i class="icon-pic"></i>相關照片
        <button type="button" @click="change_input()">上傳照片</button>
        <form id="addTextForm" @change="setImg($event)">
        </form>
      </div>
      <div id="img-wrapper" @click="deleteImg($event)"></div>
      <P class="btn-wrapper">
          <mt-button type="primary" @click="submit()">提交</mt-button>
      </P>
  </div>
</template>

 

JS文本內容：

<script>
    /** 
    * 從 file 域獲取 本地圖片 url 
    */ 
    function getFileUrl(obj) { 
      let url; 
      url = window.URL.createObjectURL(obj.files.item(0)); 
      return url; 
    }

export default {
  name: 'accident',
  // 定義數據
  data () {
    return {
      imgNum:4,    //上傳的照片數量，可根據實際情況自定義        
    }
  },//定義事件
   methods:{
      //根據點擊上傳按鈕觸發input
      change_input(){
        let inputArr=$('#addTextForm input');
        let add_inputId='';     //需要被觸發的input
        for(let i=0;i<inputArr.length;i++){
            // 根據input的value值判斷是否已經選擇文件
          if(!inputArr[i].value){          //如果沒有選擇,獲得這個input的ID      
             add_inputId=inputArr[i].id;
             break;
          }
        }
        if(add_inputId){                   //如果需要被觸發的input ID存在,將對應的input觸發
          return  $("#"+add_inputId).click();
        }else{
          alert("最多選擇"+this.imgNum+"張圖片")
        }
      },
      //當input選擇了圖片的時候觸發,將獲得的src賦值到相對應的img
      setImg(e){
        let target=e.target;
        $('#img_'+target.id).attr('src',getFileUrl(e.srcElement));
      },
      //點擊圖片刪除該圖片並清除相對的input
      deleteImg(e){
        let target=e.target;
        let inputID='';       //需要清除value的input
        if(target.nodeName=='IMG'){
          target.src='';
          inputID=target.id.replace('img_','');    //獲得需要清除value的input
          $('input#'+inputID).val("");
        }
      },
      //提交信息到后台
      submit(){
            $("#addTextForm").ajaxSubmit({
                       url: this.$root.api+"/Index/staff_accident/add",      
                       type: "post",
                       data: {
                                'total_price':this.price,
                                'descript':this.descript,
                            },
                       success:  (data) => {
                            if(data.code==0){
                              console.log(‘提交成功’);
                               $("#addTextForm input").val('');

                                 $('div#img-wrapper img').attr('src','');

                           }else{
                                alert('提交失敗');
                             }
                        }
            });  
        }
   },
  //頁面加載后執行
  mounted(){
    for(let i=0;i<this.imgNum;i++){
     //生成input框，默認為1
    let my_input = $('<input type="file" name="image" />');   //創建一個input
    my_input.attr('id',i);                           //為創建的input添加id
    $('#addTextForm').append(my_input);                     //將生成的input追加到指定的form
    //生成img，默認為1
    let my_img = $('<img src="">');
    my_img.attr('id', 'img_'+i);
    my_img.css({"max-width":"50%","max-height":"200px"});   //添加樣式，由於vue的執行機制，頁面加載的時候img標簽還沒有生成，直接寫在style樣式會不生效
    $('#img-wrapper').append(my_img); 
    }
  },
}
</script>