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

標籤：font   method   分享   ddt   replace   nbsp   blog   生效   頁面   

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(‘提交成功’);                             }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>

 

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