本文主要介紹vue在線測(cè)試(vu測(cè)試)，下面一起看看vue在線測(cè)試(vu測(cè)試)相關(guān)資訊。
搜索【大旗測(cè)試凱】，關(guān)注這個(gè)堅(jiān)持分享在測(cè)試發(fā)展干貨的家伙。
讓 讓我們回顧一下在本系列的第八次分享中給出的預(yù)期產(chǎn)品原型和需求。下圖與前兩節(jié)大體相似，只是一般的測(cè)試報(bào)表要寫的內(nèi)容可能更多，所以使用了一些多行輸入框組件。另一個(gè)特殊的新功能操作是附件上傳，這是首先要解決和掌握的重點(diǎn)內(nèi)容。
后端服務(wù)保存附件，寫一個(gè)上傳接口，服務(wù)器通過(guò)r: # save _ path = os . path . join(os . path . abs path(os . path . dirname(_ _ file _ _))。( 全員生產(chǎn)性維護(hù)服務(wù)。;)[0]，tpm service/static ;)# get file attfile = request . files . get( ;文件 )attfile . save(os . path . join(save _ path，attfile . filename))return { 代碼 : 200 信息與廣告: 上傳請(qǐng)求成功。
在這里上傳文件，一般來(lái)說(shuō)，你可以 不要無(wú)限制地上傳文件。需要在格式和大小上做一些限制，需要做一些安全處理。是通過(guò)filefield做格式限制等要求，使用secure_filename做文件名安全處理。
優(yōu)化后，完整的代碼被分成兩個(gè)片段。
1.引入依賴關(guān)系并創(chuàng)建fileform類。
？12345678910 importos #中涉及的相關(guān)依賴項(xiàng)refer from wt forms import form，filefield from mask _ wtf.file import必選，filallowedfromwerkzeug。來(lái)自werkzeug的utils importsecur: fil: #初始化返回對(duì)象resp _ success = format。resp _ format _ succ: #獲得項(xiàng)目路徑保存文件夾，則合成服務(wù)保存絕對(duì)路徑save _ path = os . path . join(os . path . abspath(os . path . dirname(_ _ file _ _))。( 全員生產(chǎn)性維護(hù)服務(wù)。;)[0]， tpm服務(wù)/靜態(tài)和。;)#獲取選擇通過(guò)表單上傳的文件attfile = re表單提交的數(shù)據(jù)。quest . files . get( ;文件 )#執(zhí)行安全名稱檢查處理file _ name = secure _ filename(attfile . filename)# save attfile . save(os . path . join(save _ path，file _ name))resp _ succ:文件名} return resp _ succ: r測(cè)試下載的。如果我沒(méi)有。;t設(shè)置全局限制，除了慢我都能上傳成功，而且我搜索了源代碼max_content_length = none，可能是版本原因?，F(xiàn)在沒(méi)有這個(gè)限制了。
？1從flash導(dǎo)入flash，request app = flash(_ _ name _ _)app . config[ ;最大內(nèi)容長(zhǎng)度。;] = 16 * 1000 * 1000關(guān)于上傳flas件的更多解釋和例子請(qǐng)參考【鏈接1】。還有一個(gè)第三方插件，可以友好的操作文件【鏈接2】，但是這兩種都是全局控制的。如果想分別控制不同接口的大小，現(xiàn)在嘗試的是讀取文件，得到長(zhǎng)度len(attfile.read)，實(shí)際上就是字節(jié)大小，然后比較返回。如果你有更好的方案，請(qǐng)告訴我。
文件上傳接口完成后，下載接口必不可少。這個(gè)比較簡(jiǎn)單，通過(guò)flask提供的send_from_directory方法實(shí)現(xiàn)。代碼如下。詳細(xì)解釋請(qǐng)參考【鏈接1】的后半部分。
？123456789101112 from flask import send _ from _ directory @ t: fime name = request . args . get( ;姓名和名稱。;)#保存文件的相對(duì)路徑save _ path = os . path . join(os . path . abspath(os . path . dirname(_ _ file _ _))。。( tpmservice )[0]， tpm服務(wù)/靜態(tài) )result = send _ from _ directory(sav測(cè)試，效果如圖。一開始是巨大的提示，然后正常上傳返回成功結(jié)果。
刷新以檢查代碼服務(wù)的存儲(chǔ)位置。文件已正確上傳。
下載的測(cè)試可以通過(guò)瀏覽get請(qǐng)求服務(wù)路徑/api/file/download？=用于下載驗(yàn)證的文件名。
用于實(shí)現(xiàn)前端vue的組件是 上傳 ，并且官網(wǎng)給出了多種樣式和，如多文件、頭像上傳、拖拽上傳、列表形式等。詳情請(qǐng)參考【鏈接3】。
如圖，其中action為上傳地址，這一塊可以換成新實(shí)現(xiàn)的上傳接口 127 . 0 . 0 . 1 : 5000/api/report/upload，表示上傳地址。默認(rèn)選擇文件后自動(dòng)上傳，實(shí)際上是幫助你實(shí)現(xiàn)postman呈現(xiàn)的表單文件自動(dòng)提交。你可以通過(guò)設(shè)置:自動(dòng)上傳= 虛假 ，或者您可以通過(guò)http-r:on-success鉤子打印上傳成功的返回信息。
？123456789101121314151617181920212223242627293031323343536模板div class = 應(yīng)用程序-容器 表單項(xiàng)目標(biāo)簽= 附件 prop = 測(cè)試文件 埃爾上傳。1 : file-list = 文件列表 :auto-upload = 真實(shí) 動(dòng)作= http:// 127 . 0 . 0 . 1 : 5000/api/report/upload .com on-success = 上傳文件 el-buttonsize = 小 type = 小學(xué)和初中點(diǎn)擊上傳/el-button div slot = 小費(fèi)和小費(fèi)class = el-upload _ _ tip 僅限jpg/png/ zip/pdf文件，不超過(guò)1m/div/el-upload/el-form-item/el-form/div/template scriptexportdefault { name : ;演示上傳 ，data{ r:[]} }，m: { uploadfil測(cè)試，可以看到正常返回2000，可以正常獲取鉤子中的三個(gè)參數(shù)信息。其實(shí)后面的報(bào)表函數(shù)就是獲取返回的文件名，賦給一個(gè)變量。
在測(cè)試的另一個(gè)案例中，文件格式不符合要求，大小超出了服務(wù)器的限制。發(fā)現(xiàn)文件格式為40000，但仍顯示fil:on-success優(yōu)化添加模式代碼如下:
？123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566768697071727374757778798081828384858687888990 template div class = 應(yīng)用程序-容器 表格項(xiàng)目實(shí)驗(yàn)室實(shí)現(xiàn)一個(gè) prop = 測(cè)試文件 el-上傳ref = 文件一 : limit = 1 : file-list = 文件列表 :auto-upload = 真實(shí) 行動(dòng)。cho 11-@ . com 127 . 0 . 0 . 1 : 5000/api/report/upload .com on-success = 上傳成功與失敗.com on-error = 上傳錯(cuò)誤 el按鈕大小= 小 type = 小學(xué)和初中點(diǎn)擊上傳/el-button div slot = 小費(fèi)和小費(fèi)class = el-upload _ _ tip 只能上傳jpg/png/zip/pdf文件。并且不超過(guò)10m/div/el-upload/el-form-item el-form-item label = 實(shí)施2 prop = 測(cè)試文件 el-上傳: limit = 1 : file-list = 文件列表 動(dòng)作= http:// 127 . 0.1 : 5000/api/report/upload : http-request = 上傳文件: on-成功= 上傳成功el按鈕大小= 小 type = 小學(xué)和初中點(diǎn)擊上傳/ el按鈕小費(fèi)和小費(fèi)class = el-upload _ _ tip 只能上傳jpg/png/zip/pdf文件，文件大小不能超過(guò)10m/div /el-upload /el-form-item。/el-form/div/template script從 axios和。;出口默認(rèn){ nam: ;演示上傳 ，data{ r:[]，fil: ; } }、m: { upload success(響應(yīng)，文件，文件列表){if(響應(yīng)。code = = = 40000){這個(gè)。$ message({ message : ;格式不正確或上傳不正常。;，type : ;警告 })這個(gè)。file list = []} else {this。$ message({ message : ;上傳成功 ，type : ;成功 })}}上傳錯(cuò)誤(err，file，file list) {this。$ message({ message : ;大小不符合要求或服務(wù)器不正常。;，type : ;警告 })}，upload defile(params){ console . log(params . file)const fd = new formdatafd . append( ;文件 ，params . file)fd . append( ;文件名 ，params . file . name)fd . append( ;異步 ，true)const config = { h: { ;cont: ;多部分/形式數(shù)據(jù) } } axios。post(params.action，fd，config)。然后(res = { console.log(res.data) })。catch(error = { this . filelist =[]this。$message({ message : ;大小不符合要求或服務(wù)器不正常。;，type : ;警告 })} } } }/腳本
為什么要講一個(gè)帶自動(dòng)上傳的自定義上傳？這里有兩點(diǎn):
到目前為止，驗(yàn)證都是靠后端，但實(shí)際上服務(wù)器端的驗(yàn)證是后驗(yàn)證，文件已經(jīng)上傳了。如果文件很大或者很大，會(huì)占用io，可以自定義提交進(jìn)行一些前端上傳驗(yàn)證。
作為慣例，盡量給大家走一趟坑。官方并沒(méi)有給出:on-succ測(cè)試，通過(guò)uploaderrors鉤子或者axios catch(錯(cuò)誤)捕獲實(shí)現(xiàn)。
到目前為止，這篇文章的分享就是關(guān)于這些內(nèi)容的。下一次，我們將完成報(bào)告部分，即平臺(tái)的第一階段。順便說(shuō)一下，我們還將公布上次調(diào)查的結(jié)果和一些后續(xù)安排。歡迎大家繼續(xù)關(guān)注和交流?？梢酝ㄟ^(guò)私信或者官方賬號(hào)聯(lián)系，加入群。
[參考鏈接]
【鏈接1】 . readthedocs . io/://element.eleme.io/#/zh-cn/component/upload
堅(jiān)持原創(chuàng)，堅(jiān)持實(shí)踐，堅(jiān)持干貨。如果覺(jué)得有用，請(qǐng)點(diǎn)擊推薦。也歡迎大家關(guān)注我的博客公園和官方賬號(hào)。
標(biāo)簽:
上傳文件
了解更多vue在線測(cè)試(vu測(cè)試)相關(guān)內(nèi)容請(qǐng)關(guān)注本站點(diǎn)。