Vue上傳圖片

EasonTyler 發(fā)布于2019-08-20 16:03 / 1944人閱讀

摘要：最近寫上傳圖片功能，一直不理解是怎么實(shí)現(xiàn)的，今天看了后端的接口實(shí)現(xiàn)，才知道大致流程。將此返回的內(nèi)容當(dāng)做標(biāo)簽的即可，展示圖片表單實(shí)現(xiàn)圖片上傳接口實(shí)現(xiàn)推薦的取到上傳的圖片由打印的可以看到，圖片信息就在里面通過上傳圖片上傳接口

最近寫上傳圖片功能，一直不理解是怎么實(shí)現(xiàn)的，今天看了后端的接口實(shí)現(xiàn)，才知道大致流程。
后臺(tái)接口接受一個(gè)input提交的文件，將其保存，并將文件名返回。將此返回的內(nèi)容當(dāng)做img標(biāo)簽的src即可，展示圖片
(1)form表單實(shí)現(xiàn)
html:


    
 
js:
selectImg(){
    let form=document.getElementById("imgLocal");
    form.submit();
}

(2)ajax實(shí)現(xiàn)（Vue推薦的axios）

let that=this;
let imgFile = $(this.$el).find("#imgLocal")[0].files[0];//取到上傳的圖片
console.log($(this.$el).find("#imgLocal")[0].files);//由打印的可以看到，圖片    信息就在files[0]里面
let formData=new FormData();//通過formdata上傳
formData.append("file",imgFile);
this.$http.post("圖片上傳接口",formData,{
method: "post",
headers: {"Content-Type": "multipart/form-data"}
}).then(function (res) {
console.log(res.data);//
}).catch(function(error){
console.log(error);
})

云服務(wù)器 GPU云服務(wù)器 vue上傳到云服務(wù)器阿里云服務(wù)器上傳用vue做好的頁面圖片上傳上傳圖片

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/82685.html

相關(guān)文章

vue用阿里云oss上傳圖片使用分片上傳只能上傳100kb以內(nèi)的解決辦法

摘要：首先，和阿里云上傳圖片結(jié)合參考了這位朋友的文章，成功的解決了我用阿里云上傳圖片前的一頭霧水。我把一個(gè)上傳組件放在了我的打開阿里云上傳組件首先，vue和阿里云oss上傳圖片結(jié)合參考了這位朋友的 https://www.jianshu.com/p/645... 文章，成功的解決了我用阿里云oss上傳圖片前的一頭霧水。該大神文章里有寫github地址，里面的2.0分支采用vue2.0實(shí)...

entner 2019-08-21 18:37 評(píng)論0 收藏0
基于Vue + Node.js + MongoDB的圖片上傳組件，實(shí)現(xiàn)圖片的預(yù)覽和刪除

摘要：網(wǎng)址功能單圖多圖上傳圖片上傳預(yù)覽上傳進(jìn)度條分組上傳，分組查詢新建分組，刪除分組刪除圖片選擇圖片目錄結(jié)構(gòu)前端利用搭建，中引入子組件。實(shí)現(xiàn)分組的新增查詢刪除。利用模塊實(shí)現(xiàn)刪除文件功能。公司要寫一些為自身業(yè)務(wù)量身定制的的組件，要基于Vue,寫完后擴(kuò)展了一下功能，選擇寫圖片上傳是因?yàn)樽约褐耙恢睂?duì)這個(gè)功能比較迷糊，所以這次好好了解了一下。演示在網(wǎng)址打開后的show.gif中。使用技術(shù)：Vu...

hzx 2019-06-26 17:30 評(píng)論0 收藏0
vue-quill-editor自定義圖片上傳

摘要：我們通常都會(huì)使用富文本編輯器在后臺(tái)編輯內(nèi)容，開發(fā)當(dāng)然也少不了，我們通過官網(wǎng)的鏈接可以找到一些資源，或者去上查找一些開源的編輯器。我們通常都會(huì)使用富文本編輯器在后臺(tái)編輯內(nèi)容，開發(fā)vue當(dāng)然也少不了，我們通過vue官網(wǎng)的鏈接可以找到一些資源，或者去github上查找一些開源的編輯器。我使用的是vue-quill-editor，它的界面很簡(jiǎn)潔，功能也滿足平時(shí)的編輯需要，不過于臃腫，但是它默...

oneasp 2019-08-20 17:26 評(píng)論0 收藏0
vue-quill-editor自定義圖片上傳

摘要：我們通常都會(huì)使用富文本編輯器在后臺(tái)編輯內(nèi)容，開發(fā)當(dāng)然也少不了，我們通過官網(wǎng)的鏈接可以找到一些資源，或者去上查找一些開源的編輯器。我們通常都會(huì)使用富文本編輯器在后臺(tái)編輯內(nèi)容，開發(fā)vue當(dāng)然也少不了，我們通過vue官網(wǎng)的鏈接可以找到一些資源，或者去github上查找一些開源的編輯器。我使用的是vue-quill-editor，它的界面很簡(jiǎn)潔，功能也滿足平時(shí)的編輯需要，不過于臃腫，但是它默...

miracledan 2019-08-01 17:01 評(píng)論0 收藏0
基于vue-elementui的圖片文件上傳的高階使用分享

摘要：前言要求圖片上傳支持多圖片上傳多瀏覽器圖片格式判斷多圖片同時(shí)上傳通過防并發(fā)設(shè)置防止可能出現(xiàn)的覆蓋圖片實(shí)時(shí)上傳后支持在新窗口中打開查看使用注意代碼中是頁面中存在循環(huán)很多上傳項(xiàng)，我為了省事直接復(fù)制粘貼的實(shí)現(xiàn)，如果單項(xiàng)上傳就不用考慮了前言要求：1、圖片上傳支持多圖片上傳 +多瀏覽器圖片格式判斷；2、多圖片同時(shí)ajax上傳通過防并發(fā)設(shè)置防止可能出現(xiàn)的覆蓋；3、圖片實(shí)時(shí)上傳后支持在新窗口...

xi4oh4o 2019-08-23 12:16 評(píng)論0 收藏0