vue里面怎么删除部分页面_基于VUE选择上传图片并页面显示（图片可删除）
基于VUE選擇上傳圖片并在頁面顯示，圖片可刪除，具體內(nèi)容如下
demo例子：
依賴文件：
HTML文本內(nèi)容：
相關(guān)照片
JS文本內(nèi)容：
/**
* 從 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
// 根據(jù)input的value值判斷是否已經(jīng)選擇文件
if(!inputArr[i].value){ //如果沒有選擇,獲得這個input的ID
add_inputId=inputArr[i].id;
break;
}
}
if(add_inputId){ //如果需要被觸發(fā)的input ID存在,將對應(yīng)的input觸發(fā)
return $("#"+addinputId).click();
}else{
alert("最多選擇"+this.imgNum+"張圖片")
}
},//當(dāng)input選擇了圖片的時候觸發(fā),將獲得的src賦值到相對應(yīng)的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
//生成input框，默認(rèn)為1
let my_input = $(''); //創(chuàng)建一個input
my_input.attr('id',i); //為創(chuàng)建的input添加id
$('#addTextForm').append(my_input); //將生成的input追加到指定的form
//生成img，默認(rèn)為1
let my_img = $('');
myimg.attr('id','img'+i);
my_img.css({"max-width":"50%","max-height":"200px"});
//添加樣式，由于vue的執(zhí)行機制，頁面加載的時候img標(biāo)簽還沒有生成，直接寫在style樣式會不生效
$('#img-wrapper').append(my_img);
}
},}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持編程之家。
《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的vue里面怎么删除部分页面_基于VUE选择上传图片并页面显示（图片可删除）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： rxjava获取异步请求的结果_我为什么
- 下一篇： vuex模块化 怎么引用state_[V