資訊專欄INFORMATION COLUMN
摘要：自定義校驗(yàn)方法因?yàn)槲业捻?xiàng)目是分情況可以選擇是否有圖所以我定義了一個(gè)變量當(dāng)他為的時(shí)候才會(huì)要求上傳走這個(gè)校驗(yàn)方法里聲明這個(gè)方法圖片驗(yàn)證請(qǐng)上傳圖片圖片驗(yàn)證根據(jù)情況去切換的值就可以控制是否校驗(yàn)失敗啦這就是校驗(yàn)圖片的思路了是不是很簡(jiǎn)單呢再來(lái)說(shuō)說(shuō)表單帶
自定義校驗(yàn)方法,因?yàn)槲业捻?xiàng)目是,分情況,可以選擇是否有圖,所以我定義了一個(gè)變量hasFmt,
當(dāng)他為false的時(shí)候,才會(huì)要求上傳,走這個(gè)校驗(yàn)方法,rules里聲明這個(gè)方法
var valiIcon = (rule, value, callback) => { // 圖片驗(yàn)證
if (!this.hasFmt) {
callback(new Error("請(qǐng)上傳圖片"));
} else {
callback();
}
icon:[
{required:true, validator: valiIcon, trigger: "change" } // 圖片驗(yàn)證
]
根據(jù)情況去切換hasFmt的值 就可以控制是否校驗(yàn)失敗啦~~
這就是校驗(yàn)圖片的思路了,是不是很簡(jiǎn)單呢~~~
再來(lái)說(shuō)說(shuō)表單帶著圖片一起上傳~
fileChange(file,fileList){
this.bannerForm.filename = file.name;
this.bannerForm.file = file.raw;
console.log(file.raw)
if(fileList.length>0){
this.hasFmt = true;
}
},
例如,file change的時(shí)候,當(dāng)fileList有值,就可以斷定已經(jīng)選取了圖片了,講file流保存好,
(我這里是:this.bannerForm.file = file.raw;)并且可以把hasFmt變?yōu)閠ure啦,
再者,file remover的時(shí)候 回顯的時(shí)候, 等等,都要根據(jù)情況改變hasFmt的值,來(lái)達(dá)到圖片的校驗(yàn)
上傳是這樣的:
this.$refs.bannerForm.validate((valid) => {
if(valid){
let param = new FormData();
this.toBannerBtn = true;
param.append("file",this.bannerForm.file,this.bannerForm.filename);
param.append("tokenId",this.$store.state.user.tokenId);
param.append("titleShort",this.bannerForm.title_short);
param.append("bannerType","1");
param.append("linkId",this.bannerForm.link);
param.append("articleId",this.bannerForm.articleId);
console.log(param)
this.$post("bannerInfo/save",param).then(res =>{
// console.log(res);
if(res.code == 0){
this.$message({
type: "success",
message: res.msg
});
setTimeout(() => {
this.newsList();
}, 1000);
this.bannerForm={};
this.bannerDialog = false;
}else{
this.$message({
type: "warning",
message: res.msg?res.msg:"出錯(cuò)了"
});
}
this.toBannerBtn = false;
})
}
})
表單校驗(yàn)后,就可以進(jìn)行上傳啦,采用的是new FormData();取值上傳的,要注意 ,取消其序列號(hào),我在公共的上傳方法里封裝好了,所以這里就直接調(diào)用啦~
小可愛們,如果覺得學(xué)到了一點(diǎn)點(diǎn),麻煩點(diǎn)個(gè)贊喲,灰常感謝啦~
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100513.html
摘要：今天有一個(gè)坑，同時(shí)要上傳圖片和文件，而且圖片要展示縮略圖，文件要展示列表。我的思路是首先，只上傳附件照片，這個(gè)直接看的官方例子就行，不僅僅上傳附件照片，還同時(shí)上傳其他參數(shù)。然后，再做上傳照片和文件，上傳其他參數(shù)，其實(shí)也就是文件合并。 今天有一個(gè)坑，同時(shí)要上傳圖片和文件，而且圖片要展示縮略圖，文件要展示列表。 我的思路是： 首先，只上傳附件照片，這個(gè)直接看ele的官方例子就行，不僅僅上傳...
摘要：在日常項(xiàng)目開發(fā)中，圖片上傳是一個(gè)十分常見的場(chǎng)景。在圖片拖拽上傳這個(gè)業(yè)務(wù)場(chǎng)景中，被拖拽元素為頁(yè)面外部的圖片文件，故此處僅用到目標(biāo)元素的各個(gè)事件。具體實(shí)現(xiàn)代碼如下至此，圖片上傳的常用知識(shí)點(diǎn)以梳理完畢，歡迎補(bǔ)充。 在日常項(xiàng)目開發(fā)中，圖片上傳是一個(gè)十分常見的場(chǎng)景。而現(xiàn)在的各種UI框架都提供了自己的上傳組件，網(wǎng)上第三方的上傳組件也多如牛毛?？赡苣阍缫蚜?xí)慣了直接使用這些現(xiàn)成的組件，然而對(duì)于其具體的...
摘要：在日常項(xiàng)目開發(fā)中，圖片上傳是一個(gè)十分常見的場(chǎng)景。在圖片拖拽上傳這個(gè)業(yè)務(wù)場(chǎng)景中，被拖拽元素為頁(yè)面外部的圖片文件，故此處僅用到目標(biāo)元素的各個(gè)事件。具體實(shí)現(xiàn)代碼如下至此，圖片上傳的常用知識(shí)點(diǎn)以梳理完畢，歡迎補(bǔ)充。 在日常項(xiàng)目開發(fā)中，圖片上傳是一個(gè)十分常見的場(chǎng)景。而現(xiàn)在的各種UI框架都提供了自己的上傳組件，網(wǎng)上第三方的上傳組件也多如牛毛?？赡苣阍缫蚜?xí)慣了直接使用這些現(xiàn)成的組件，然而對(duì)于其具體的...
摘要：無(wú)效方案根據(jù)交易所小時(shí)成交量占比和實(shí)時(shí)價(jià)格加權(quán)計(jì)算得到渲染結(jié)果是一個(gè)包含了文字，同時(shí)有名為的，并無(wú)小圖標(biāo)，后邊中括號(hào)結(jié)構(gòu)里只能有一個(gè)有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性，即可實(shí)現(xiàn)固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實(shí)際應(yīng)用大多數(shù)是需要自適應(yīng)占滿父元素，超出滾動(dòng)固定表頭的...
閱讀 736·2023-04-25 19:43
閱讀 3981·2021-11-30 14:52
閱讀 3807·2021-11-30 14:52
閱讀 3871·2021-11-29 11:00
閱讀 3802·2021-11-29 11:00
閱讀 3904·2021-11-29 11:00
閱讀 3580·2021-11-29 11:00
閱讀 6184·2021-11-29 11:00
