Vue上傳圖片

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

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

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


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

(2)ajax實現(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);
})

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82685.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

xi4oh4o 2019-08-23 12:16 評論0 收藏0