vue+bootstrap如何實(shí)現(xiàn)圖片上傳圖片展示功能
這篇文章給大家分享的是有關(guān)vue+ bootstrap如何實(shí)現(xiàn)圖片上傳圖片展示功能的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
目前創(chuàng)新互聯(lián)建站已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、陸豐網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
效果圖如下所示：
html
.....
.......
<-- key=idPicUrl -->
vue
data: {
queryFirmInfo：{
idPicUrl：""
......
}
}//選擇改變圖片
handleFileChange(e){
var vm=this;
let file = e.target.files[0];
let supportedTypes = ['image/jpg', 'image/jpeg', 'image/png'];
if (file && supportedTypes.indexOf(file.type) >= 0) {
baseFileAjax(new FormData($( "#fileForm" )[0]),function(result){
if(result.ret==0){
//提交成功后
//將圖片上傳到后臺(tái)，得到后臺(tái)圖片的路徑。
vm.queryFirmInfo["idPicUrl"]=result.url;
$("#dForm").formValidation('revalidateField', "idPicUrl");
}else{
layer.msg("修改圖片失??！")
}
})
} else {
layer.alert('文件格式只支持：jpg、jpeg 和 png');
}
},/**
* @method :form表單提交文件
* @param url ：請(qǐng)求路徑
* @param data ：請(qǐng)求數(shù)據(jù)(new FormData($( "#imgForm" )[0]))
* @param method：回調(diào)方法
*/
function baseFileAjax(data,method){
$.ajax({
url: '/dspark-firm/firmMember/uploadFile.yt' ,
type: 'POST',
data: data,
async: false,
cache: false,
contentType: false,
processData: false,
success: method,
error: function (returndata) {
alert("Connection error");
}
});
}感謝各位的閱讀！關(guān)于“vue+ bootstrap如何實(shí)現(xiàn)圖片上傳圖片展示功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
新聞名稱：vue+bootstrap如何實(shí)現(xiàn)圖片上傳圖片展示功能
本文URL：
http://weahome.cn/article/jseiss.html
重慶分公司
重慶分公司
