van-uploader 封装上传图片，上传文件
1.
<van-uploader
v-model="fileLists"
:name="name"
:accept="''"
:preview-size="previewSize || '80px'"
:preview-image="previewImage || true"
:preview-full-image="previewFullImage || true"
:preview-options="previewOptions || null"
:multiple="multiple || false"
:disabled="disabled || false"
:readonly="readonly || false"
:deletable="false"
:show-upload="showUpload || true"
:lazy-load="lazyLoad || false"
:capture="capture"
:after-read="customAfterRead"
:before-read="customBeforeRead"
:before-delete="beforeDelete"
:max-size="maxSize"
:upload-text="uploadText"
:max-count="maxCount || 1"
:result-type="resultType || 'dataUrl'"
:image-fit="imageFit || 'cover'"
:upload-icon="uploadIcon || 'photograph'"
@oversize="oversize"
@click-upload="clickUpload"
@click-preview="clickPreview"
@close-preview="closePreview"
>
<div v-if="type==='image'" class="uploader-content">
<div class="uploader-img-icon"></div>
<div>上传图片</div>
</div>
<div v-if="type==='file'" class="uploader-content">
<div class="uploader-file-icon"></div>
<div>上传附件</div>
</div>
<template #preview-cover="{ file, index }">
<div class="preview-cover">
<div class="preview-cover-delete" @click="(event)=>handleDelete(event, file,index)"></div>
</div>
</template>
<slot v-if="!type" />
</van-uploader>
2.在methods有几个方法
//校验格式
// 校验accept类型
checkAccept(file){
console.log(file.type)
if(this.accept){
const acceptLists = this.accept.split(',').map((item)=>item.replace('.','')).join('/');
if(this.type==='image'){
if(!this.accept.includes(file.type.replace('image/','.'))){
Toast(`上传图片类型仅支持${acceptLists}`)
return false
}
return true;
}
if(this.type==='file'){
if(!this.accept.includes(file.name.split('.').pop())){
Toast(`上传文件类型为仅支持${acceptLists}`)
return false;
}
return true
}
}else {
if(this.type==='image'){
if(!file.type.includes('image')){
Toast('上传图片类型仅支持jpeg/jpg/png')
return false
}
}
return true;
}
},
//校验大小
checkMaxSize(file){
if(this.maxSize&&(file.size > this.maxSize)){
const mb = this.maxSize / 1024 /1024;
Toast(this.type==='file'?`上传文件大小不能超过${mb}MB`:`上传图片大小不能超过${mb}MB`)
return false;
}
return true;
},
customBeforeRead(file){
if(this.beforeRead){
return this.beforeRead(file)
}else {
return this.checkAccept(file)&&this.checkMaxSize(file);
}
},
//上传方法
customAfterRead(file, data){
if(this.afterRead){
this.afterRead(file);
}
file.status = 'uploading';
file.message = '上传中...';
// 创建form对象
let formdata = new FormData();
formdata.append('file', file.file, file.name);
formdata.append('path', this.path);
upLoad(this.serverApi, formdata).then((res)=>{
file.status = 'done';
file.message = '';
file.url = res.data.url
}).catch(()=>{
this.fileLists = this.fileLists.filter((item, i)=> data.index!==i)
})
},
//删除方法
async customBeforeDelete(){
let flag = false;
if(this.beforeDelete){
flag = await this.beforeDelete();
}else {
return await Dialog.confirm({
message: '确定要删除吗',
confirmButtonText: '确定',
confirmButtonColor: '#FFCC33'
}).then(()=>{
return true
}).catch(()=>{
return false
})
}
return flag;
},
//删除方法
async handleDelete(e, file, index){
e.stopPropagation();
this.$emit('delete', file, index)
const flag = await this.customBeforeDelete();
if(!flag){
return;
}
this.fileLists = this.fileLists.filter((item, i)=> index!==i)
},
3.watch(){
value:{
immediate:true,
handler(data){
this.fileLists = data;
}
},
fileLists(data){
console.log('filelist', data)
this.$emit('change', data)
},
api:{
//接口地址
}
}
4.在页面里调用此组件
//上传图片
<Uploader
v-model="uploadImgLists"
tip="图片最多添加3张，每张大小不超过10MB"
type="image"
previewSize="100px"
:maxCount="3"
:maxSize="10*1024*1024"
path='接口地址'
>
</Uploader>
//上传文件
<Uploader
v-model="fileLists"
type="file"
tip="附件最多上传1个，文件大小不超过10MB，格式支持doc/docx/pdf/xlsx/xls"
:maxSize="10*1024*1024"
:accept="'.pdf,.doc,.docx,.xls,.xlsx'"
path='接口地址'
>
</Uploader>
欢迎大家使用，如果没有实现上传功能，欢迎来找我沟通。