Vue+Flask實(shí)現(xiàn)圖片傳輸功能
本文實(shí)例為大家分享了Vue+Flask實(shí)現(xiàn)圖片傳輸功能的具體代碼,供大家參考,具體內(nèi)容如下
完整流程:
1.圖片轉(zhuǎn)為formdata 傳輸?shù)胶蠖?br />2.后端接收后,確定文件后綴名無(wú)誤,修改文件名并保存到固定的路徑中
3.前端請(qǐng)求圖片
4.后端根據(jù)圖片名字返回圖片數(shù)據(jù)流
5.前端將數(shù)據(jù)流處理,轉(zhuǎn)為圖片
1.Vue上傳
<template> ? ? <div> ? ? ? ? <input type="file" class="file" id ='file'>? ? ? ? ? <input type="submit" @click="uploadClick"> ? ? </div> </template> <script> export default { ? ? ? ? data () { ? ? ? ? return {} ? ? }, ? ? methods:{ ? ? ? ? uploadClick(){ ? ? ? ? ? ? console.log(document.getElementById('file').files[0]); ? ? ? ? ? ? var formData = new window.FormData()? ? ? ? ? ? ? formData.append('file',document.getElementById('file').files[0]) ? ? ? ? ? ? upload(formData) ? ? ? ? ? ?? ? ? ? ? } ?? ? ? } } </script> //這是封裝的請(qǐng)求 export const upload = (file) => { ? return request({ ? ? url: '/api/uavprp/upload', ? ? data: file, ? ? method: 'post', ? ? headers: {? ? ? ? 'Content-Type': 'multipart/form-data' ? ? ?}, ? }) }
2.Flask接收
#請(qǐng)求中獲取到上傳的圖片 a = request.files.get('file') #限制文件后綴名必須為圖片的類(lèi)型 allowed_filename = set(['png', 'jpg', 'JPG', 'PNG']) isallowed = '.' in filename and filename.rsplit('.', 1)[1] in allowed_filename path = basedir + "/image/" ?#這里的image是自己創(chuàng)建的保存圖片文件夾路徑 img_name = change_file_name(a.filename,ImgID)#這是我自己定義的一個(gè)方法 為了修改圖片的名字為隨機(jī)生成的唯一ID,同時(shí)不修改后綴名 file_path = path + img_name#完整的保存路徑加圖片名 a.save(file_path)#保存
3.Vue請(qǐng)求圖片并轉(zhuǎn)換返回的數(shù)據(jù)流為圖片展示
<template> ?? ?<div> ? ? ? <img :src="ferUrl"/> ? ? </div> </template> <script> export default { ? ? ? ? data () { ? ? ? ? return { ?? ??? ??? ?imgUrl: "", ?? ??? ?} ? ? }, ? ? created(){ ?? ??? ?getImg("ImgNXTIP298.jpg").then((res) => { ? ? ? ? this.imgUrl = window.URL.createObjectURL(res.data);//這里請(qǐng)求接收的一定是Blod類(lèi)型數(shù)據(jù) ? ? ? ? console.log(this.imgUrl); ? ? ? }); ?? ?} } </script> //封裝的圖片請(qǐng)求 export const getImg = (imgID) => { ? return request({ ? ? url: '/api/ferchoosen/getFerImg', ? ? method: 'get', ? ? responseType:"blob", ? ? params: { ? ? ? imgID ? ? } ? }) }
4.Flask接收前端請(qǐng)求返回圖片數(shù)據(jù)流
imgID = request.args["imgID"] ? ? if imgID == None: ? ? ? ? return output(msg="該圖片不存在") ? ? path = basedir + "/image/" ? ? image_data = open(os.path.join(path, '%s' % imgID), "rb").read() ? ? response = make_response(image_data) ? ? response.headers['Content-Type'] = 'image/png'#返回的內(nèi)容類(lèi)型必須修改 ? ? return response
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue數(shù)據(jù)渲染出現(xiàn)閃爍問(wèn)題
本篇文章主要介紹了vue數(shù)據(jù)渲染出現(xiàn)閃爍問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06vue+iview tabs context-menu 彈出框修改樣式的方法
今天遇到一個(gè)需求說(shuō)頁(yè)面頂部的菜單右鍵彈出框離得有點(diǎn)遠(yuǎn),需要我們做調(diào)整,下面小編給大家分享下vue+iview tabs context-menu 彈出框修改樣式的方法,感興趣的朋友跟隨小編一起看看吧2024-06-06移動(dòng)端 Vue+Vant 的Uploader 實(shí)現(xiàn)上傳、壓縮、旋轉(zhuǎn)圖片功能
這篇文章主要介紹了移動(dòng)端 Vue+Vant 的Uploader 實(shí)現(xiàn) 上傳、壓縮、旋轉(zhuǎn)圖片功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義
這篇文章主要為大家詳細(xì)介紹了Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08vue中的vue-print-nb如何實(shí)現(xiàn)頁(yè)面打印
這篇文章主要介紹了vue中的vue-print-nb如何實(shí)現(xiàn)頁(yè)面打印,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04基于Vue方法實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器
這篇文章主要為大家詳細(xì)介紹了基于Vue方法實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08