vue中實現(xiàn)圖片和文件上傳的示例代碼
更新時間：2018年03月16日 09:49:55 投稿：jingxian
下面小編就為大家分享一篇在vue中實現(xiàn)圖片和文件上傳的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
html頁面
<input type="file" value="" id="file" @change='onUpload'>//注意不能帶括號
js代碼
methods: {
//上傳圖片
onUpload(e){
var formData = new FormData();
f ormData.append('file', e.target.files[0]);
formData.append('type', 'test');
$.ajax({
url: '/ShopApi/util/upload.weixun'，//這里是后臺接口需要換掉
type: 'POST',
dataType: 'json',
cache: false,
data: formData,
processData: false,
contentType: false,
success: (res) => {
if (res.code === 200) {
var img_tpl ='<div class="picture" style="width:108px;float:left;"><img id="preview" src="'+后臺返回的tu'pian路徑+'" style="width:48px;height:48px;float:left;background-size:cover;"/><span class="r-span"
onclick = "onDeletePicture()" style="color:#49BDCC;display:block;float:left;margin-left:10px;line-height:48px;">刪除</span></div>';
$("#refund_img").after(img_tpl);
}
},
error: function(err) {
alert("網(wǎng)絡(luò)錯誤");
}
});
}
}
圖片效果圖
以上這篇vue中實現(xiàn)圖片和文件上傳的示例代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
基于Vue實現(xiàn)可選擇不連續(xù)的時間范圍的日期選擇器
這篇文章主要為大家詳細(xì)介紹了如何基于Vue.js實現(xiàn)一個可選擇不連續(xù)的時間范圍的日期選擇器，文中的示例代碼簡潔易懂，需要的可以參考一下2023-06-06
這篇文章主要介紹了vue.js系列中的vue-fontawesome使用,需要的朋友可以參考下2018-02-02
Vue包大小優(yōu)化的實現(xiàn)(從1.72M到94K)
這篇文章主要介紹了Vue包大小優(yōu)化的實現(xiàn)(從1.72M到94K)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
Vue報錯"Failed?to?resolve?loader:less-loader"的解決方
這篇文章主要給大家介紹了關(guān)于Vue報錯"Failed?to?resolve?loader:less-loader"的解決方法,文中通過圖文介紹的非常詳細(xì),對同樣遇到這樣問題的朋友具有一定的需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue3.0-props、computed、自定義事件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue實現(xiàn)超過兩行顯示展開收起的代碼，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了如何通過vue實現(xiàn)微博中常見的@人的功能，同時增加鼠標(biāo)點擊事件和一些頁面小優(yōu)化。感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2021-12-12
vue實現(xiàn)加載頁面自動觸發(fā)函數(shù)(及異步獲取數(shù)據(jù))
這篇文章主要介紹了vue實現(xiàn)加載頁面自動觸發(fā)函數(shù)(及異步獲取數(shù)據(jù))，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
本篇文章主要介紹了Vue2 SSR渲染根據(jù)不同頁面修改 meta，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue使用$emit時,父組件無法監(jiān)聽到子組件的事件實例
下面小編就為大家分享一篇vue使用$emit時,父組件無法監(jiān)聽到子組件的事件實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02