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

demo例子：

依賴文件：

HTML文本內容：

相關照片

JS文本內容：

/**

* 從 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

// 根據input的value值判斷是否已經選擇文件

if(!inputArr[i].value){ //如果沒有選擇,獲得這個input的ID

add_inputId=inputArr[i].id;

break;

}

}

if(add_inputId){ //如果需要被觸發的input ID存在,將對應的input觸發

return $("#"+addinputId).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

//生成input框，默認為1

let my_input = $(''); //創建一個input

my_input.attr('id',i); //為創建的input添加id

$('#addTextForm').append(my_input); //將生成的input追加到指定的form

//生成img，默認為1

let my_img = $('');

myimg.attr('id','img'+i);

my_img.css({"max-width":"50%","max-height":"200px"});

//添加樣式，由于vue的執行機制，頁面加載的時候img標簽還沒有生成，直接寫在style樣式會不生效

$('#img-wrapper').append(my_img);

}

},}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持編程之家。

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的vue里面怎么删除部分页面_基于VUE选择上传图片并页面显示（图片可删除）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。