VUE如何實現(xiàn)選擇上傳圖片并頁面顯示功能

這篇文章給大家分享的是有關VUE如何實現(xiàn)選擇上傳圖片并頁面顯示功能的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

基于VUE選擇上傳圖片并在頁面顯示，圖片可刪除，具體內(nèi)容如下

demo例子：

依賴文件：jqueryform

HTML文本內(nèi)容：

<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文本內(nèi)容：

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

export default {
 name: 'accident',
 // 定義數(shù)據(jù)
 data () {
 return {
 imgNum:4, //上傳的照片數(shù)量，可根據(jù)實際情況自定義 
 }
 },//定義事件
 methods:{
 //根據(jù)點擊上傳按鈕觸發(fā)input
 change_input(){
 let inputArr=$('#addTextForm input');
 let add_inputId=''; //需要被觸發(fā)的input
 for(let i=0;i<inputArr.length;i++){
 // 根據(jù)input的value值判斷是否已經(jīng)選擇文件
 if(!inputArr[i].value){ //如果沒有選擇,獲得這個input的ID 
 add_inputId=inputArr[i].id;
 break;
 }
 }
 if(add_inputId){ //如果需要被觸發(fā)的input ID存在,將對應的input觸發(fā)
 return $("#"+add_inputId).click();
 }else{
 alert("最多選擇"+this.imgNum+"張圖片")
 }
 },
 //當input選擇了圖片的時候觸發(fā),將獲得的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('提交失敗');
 }
 }
 }); 
 }
 },
 //頁面加載后執(zhí)行
 mounted(){
 for(let i=0;i<this.imgNum;i++){
 //生成input框，默認為1
 let my_input = $('<input type="file" name="image" />'); //創(chuàng)建一個input
 my_input.attr('id',i); //為創(chuàng)建的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的執(zhí)行機制，頁面加載的時候img標簽還沒有生成，直接寫在style樣式會不生效
 $('#img-wrapper').append(my_img); 
 }
 },
}
</script>

感謝各位的閱讀！關于“VUE如何實現(xiàn)選擇上傳圖片并頁面顯示功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！