W3Cschool
恭喜您成為首批注冊(cè)用戶(hù)
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
import Vue from 'vue';
import { Uploader } from 'vant';
Vue.use(Uploader);
文件上傳完畢后會(huì)觸發(fā)after-read回調(diào)函數(shù),獲取到對(duì)應(yīng)的file對(duì)象
<van-uploader :after-read="afterRead" />
export default {
methods: {
afterRead(file) {
// 此時(shí)可以自行將文件上傳至服務(wù)器
console.log(file);
}
}
};
通過(guò)v-model可以綁定已經(jīng)上傳的圖片列表,并展示圖片列表的預(yù)覽圖
<van-uploader v-model="fileList" multiple />
export default {
data() {
return {
fileList: [
{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
// Uploader 根據(jù)文件后綴來(lái)判斷是否為圖片文件
// 如果圖片 URL 中不包含類(lèi)型信息,可以添加 isImage 標(biāo)記來(lái)聲明
{ url: 'https://cloud-image', isImage: true }
]
}
}
};
通過(guò)max-count屬性可以限制上傳文件的數(shù)量,上傳數(shù)量達(dá)到限制后,會(huì)自動(dòng)隱藏上傳區(qū)域
<van-uploader
v-model="fileList"
multiple
:max-count="2"
/>
export default {
data() {
return {
fileList: []
}
}
};
通過(guò)插槽可以自定義上傳區(qū)域的樣式
<van-uploader>
<van-button icon="photo" type="primary">上傳圖片</van-button>
</van-uploader>
通過(guò)傳入beforeRead函數(shù)可以在上傳前進(jìn)行校驗(yàn),返回true表示校驗(yàn)通過(guò),返回false表示校驗(yàn)失敗。支持返回Promise進(jìn)行異步校驗(yàn)
<van-uploader :before-read="beforeRead" />
import { Toast } from 'vant';
export default {
methods: {
// 返回布爾值
beforeRead(file) {
if (file.type !== 'image/jpeg') {
Toast('請(qǐng)上傳 jpg 格式圖片');
return false;
}
return true;
},
// 返回 Promise
asyncBeforeRead(file) {
return new Promise((resolve, reject) => {
if (file.type !== 'image/jpeg') {
Toast('請(qǐng)上傳 jpg 格式圖片');
reject();
} else {
resolve();
}
});
}
}
}
參數(shù) | 說(shuō)明 | 類(lèi)型 | 默認(rèn)值 |
---|---|---|---|
accept | 允許上傳的文件類(lèi)型,詳細(xì)說(shuō)明 | string | image/* |
name v2.0.3 | 標(biāo)識(shí)符,可以在回調(diào)函數(shù)的第二項(xiàng)參數(shù)中獲取 | number | string | - |
preview-size | 預(yù)覽圖和上傳區(qū)域的尺寸,默認(rèn)單位為px | number | string | 80px |
preview-image | 是否在上傳完成后展示預(yù)覽圖 | boolean | true |
preview-full-image v2.1.5 | 是否在點(diǎn)擊預(yù)覽圖后展示全屏圖片預(yù)覽 | boolean | true |
multiple | 是否開(kāi)啟圖片多選,部分安卓機(jī)型不支持 | boolean | false |
disabled | 是否禁用文件上傳 | boolean | false |
deletable v2.2.12 | 是否展示刪除按鈕 | boolean | true |
capture | 圖片選取模式,可選值為camera (直接調(diào)起攝像頭) | string | - |
after-read | 文件讀取完成后的回調(diào)函數(shù) | Function | - |
before-read | 文件讀取前的回調(diào)函數(shù),返回false 可終止文件讀取,支持返回 Promise | Function | - |
before-delete | 文件刪除前的回調(diào)函數(shù),返回false 可終止文件讀取,支持返回 Promise | Function | - |
max-size | 文件大小限制,單位為byte | number | string | - |
max-count | 文件上傳數(shù)量限制 | number | string | - |
result-type v2.2.7 | 文件讀取結(jié)果類(lèi)型,可選值為file text | string | dataUrl |
upload-text | 上傳區(qū)域文字提示 | string | - |
image-fit v2.1.5 | 預(yù)覽圖裁剪模式,可選值見(jiàn) Image 組件 | string | cover |
事件名 | 說(shuō)明 | 回調(diào)參數(shù) |
---|---|---|
oversize | 文件大小超過(guò)限制時(shí)觸發(fā) | 同after-read |
click-preview | 點(diǎn)擊預(yù)覽圖時(shí)觸發(fā) | 同after-read |
close-preview | 關(guān)閉全屏圖片預(yù)覽時(shí)觸發(fā) | - |
delete | 刪除文件預(yù)覽時(shí)觸發(fā) | 同after-read |
名稱(chēng) | 說(shuō)明 |
---|---|
default | 自定義上傳區(qū)域 |
before-read、after-read、before-delete 執(zhí)行時(shí)會(huì)傳遞以下回調(diào)參數(shù):
參數(shù)名 | 說(shuō)明 | 類(lèi)型 |
---|---|---|
file | 文件解析后的 file 對(duì)象 | object |
detail | 額外信息,包含 name 和 index 字段 | object |
result-type字段表示文件讀取結(jié)果的類(lèi)型,上傳大文件時(shí),建議使用 file 類(lèi)型,避免卡頓。
值 | 描述 |
---|---|
file | 結(jié)果僅包含 File 對(duì)象 |
text | 結(jié)果包含 File 對(duì)象,以及文件的文本內(nèi)容 |
dataUrl | 結(jié)果包含 File 對(duì)象,以及文件對(duì)應(yīng)的 base64 編碼 |
通過(guò) ref 可以獲取到 Uploader 實(shí)例并調(diào)用實(shí)例方法,詳見(jiàn) 組件實(shí)例方法
方法名 | 說(shuō)明 | 參數(shù) | 返回值 |
---|---|---|---|
closeImagePreview | 關(guān)閉全屏的圖片預(yù)覽 | - | - |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話(huà):173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: