快捷導(dǎo)航

vue中實(shí)現(xiàn)圖片和文件上傳的示例代碼

更新時(shí)間：2018年03月16日 09:49:55 投稿：jingxian

下面小編就為大家分享一篇在vue中實(shí)現(xiàn)圖片和文件上傳的示例代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

html頁面

<input type="file" value="" id="file" @change='onUpload'>//注意不能帶括號(hào)

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'，//這里是后臺(tái)接口需要換掉
        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="'+后臺(tái)返回的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ò)錯(cuò)誤");
        }
      });
} 
}

圖片效果圖

以上這篇vue中實(shí)現(xiàn)圖片和文件上傳的示例代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于Vue實(shí)現(xiàn)可選擇不連續(xù)的時(shí)間范圍的日期選擇器
這篇文章主要為大家詳細(xì)介紹了如何基于Vue.js實(shí)現(xiàn)一個(gè)可選擇不連續(xù)的時(shí)間范圍的日期選擇器，文中的示例代碼簡潔易懂，需要的可以參考一下
2023-06-06
vue.js系列中的vue-fontawesome使用
這篇文章主要介紹了vue.js系列中的vue-fontawesome使用,需要的朋友可以參考下
2018-02-02
Vue包大小優(yōu)化的實(shí)現(xiàn)(從1.72M到94K)
這篇文章主要介紹了Vue包大小優(yōu)化的實(shí)現(xiàn)(從1.72M到94K)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02
Vue報(bào)錯(cuò)"Failed?to?resolve?loader:less-loader"的解決方
這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò)"Failed?to?resolve?loader:less-loader"的解決方法,文中通過圖文介紹的非常詳細(xì),對同樣遇到這樣問題的朋友具有一定的需要的朋友可以參考下
2023-02-02
vue3.0-props、computed、自定義事件方式
這篇文章主要介紹了vue3.0-props、computed、自定義事件方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue實(shí)現(xiàn)超過兩行顯示展開收起的代碼
這篇文章主要介紹了vue實(shí)現(xiàn)超過兩行顯示展開收起的代碼，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
如何通過Vue實(shí)現(xiàn)@人的功能
這篇文章主要介紹了如何通過vue實(shí)現(xiàn)微博中常見的@人的功能，同時(shí)增加鼠標(biāo)點(diǎn)擊事件和一些頁面小優(yōu)化。感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2021-12-12
vue實(shí)現(xiàn)加載頁面自動(dòng)觸發(fā)函數(shù)(及異步獲取數(shù)據(jù))
這篇文章主要介紹了vue實(shí)現(xiàn)加載頁面自動(dòng)觸發(fā)函數(shù)(及異步獲取數(shù)據(jù))，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue2 SSR渲染根據(jù)不同頁面修改 meta
本篇文章主要介紹了Vue2 SSR渲染根據(jù)不同頁面修改 meta，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
vue使用$emit時(shí),父組件無法監(jiān)聽到子組件的事件實(shí)例
下面小編就為大家分享一篇vue使用$emit時(shí),父組件無法監(jiān)聽到子組件的事件實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02