iviewUpload组件的坑
上官⽅⽂档 demo 代码
<template>
<div class="demo-upload-list" v-for="item in uploadList">
<template v-if="item.status === 'finished'">
<img :src="item.url">
<div class="demo-upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
</div>
</template>
<template v-else>
<Progress v-if="item.showProgress":percent="item.percentage" hide-info></Progress>
浦东高桥镇小学</template>
</div>
<Upload ref="upload":show-upload-list="false":default-file-list="defaultList":on-success="handleSuccess":format="['jpg','jpeg','png']":max-size="2048":o n-format-error="handleFormatError":on-exceeded-size="handleMaxSize":before-upload="handleBeforeUpload" multiple type="drag" action="//picode/posts/" >
<div >
<Icon type="ios-camera" size="20"></Icon>
</div>
</Upload>
<Modal title="View Image" v-model="visible">十八大反腐倡廉
<img :src="'o5wwk8baw.qnssl/' + imgName + '/large'" v-if="visible" >
</Modal>
</template>
<script>
export default{
data(){
return{
defaultList:[
聚四氟乙烯涂层{超眼
'name':'a42bdcc1178e62b4694c830f028db5c0',
'url':'o5wwk8baw.qnssl/a42bdcc1178e62b4694c830f028db5c0/avatar'
},
{
'name':'bc7521e033abdd1e92222d733590f104',
'url':'o5wwk8baw.qnssl/bc7521e033abdd1e92222d733590f104/avatar'
}
],
imgName:'',
visible:false,
uploadList:[]
}
},
methods:{
handleView(name){
this.imgName = name;
this.visible =true;
},
handleRemove(file){
const fileList =this.$refs.upload.fileList;
this.$refs.upload.fileList.splice(fileList.indexOf(file),1);
},
handleSuccess(res, file){
file.url ='o5wwk8baw.qnssl/7eb99afb9d5f317c912f08b5212fd69a/avatar';
file.name ='7eb99afb9d5f317c912f08b5212fd69a';
file.name ='7eb99afb9d5f317c912f08b5212fd69a';
},
handleFormatError(file){
this.$Notice.warning({
title:'The file format is incorrect',
desc:'File format of '+ file.name +' is incorrect, please select jpg or png.' });
},
沈晗耀
handleMaxSize(file){
this.$Notice.warning({
title:'Exceeding file size limit',
desc:'File '+ file.name +' is too large, no more than 2M.' });
},
handleBeforeUpload(){
const check =this.uploadList.length <5;
if(!check){
this.$Notice.warning({
title:'Up to five pictures can be uploaded.'
});
}
return check;
}
},
mounted(){
this.uploadList =this.$refs.upload.fileList;
}
}
</script>
<style>
.demo-upload-list {
display: inline-block;
width:60px;
height:60px;
text-align: center;
line-height:60px;
border:1px solid transparent;
border-radius:4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow:01px 1px rgba(0,0,0,0.2);
margin-right:4px;
}
.demo-upload-list img {
width:100%;
height:100%;
}
.demo-upload-list-cover {
display: none;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
display: block;
}
.demo-upload-list-cover i {
color: #fff;
font-size:20px;
cursor: pointer;
margin:02px;
}
}
</style>
1. 按照官⽅⽂档，搬下来代码，执⾏，最后的结果就是。。。进度条 ？？ 不存在的，⽽且官⽅⽂档写的灰常灰常模糊，获取进度的百分
⽐虽然在 filelist 中有 ⼀个percent 的参数，但是，然并卵 需要调⽤内部的函数实现：以下是实现在控制台打印出进度百分⽐ handleProgress(event, file, fileList){
progress=(event)=>{
// event.loaded 已经上传了⽂件⼤⼩
// al 上传⽂件总⼤⼩
let uploadPercent =((event.loaded / al)*100).toFixed(1)+'%'
console.log(uploadPercent)
}
}
2. 作为⼀个好学的好孩⼦（不要吐槽我）怎么能就此打住呢，我要的效果是，和官⽅展⽰的效果⼀样的东西，不要只是在控制台输出⼀
个百分⽐
坑爹 的⽂档，没有这段代码不说，也偷懒
1. 继续研究打印出来的属性 percentage showProgress 既然有这两个属性那么，说明他们就可以做⼀些⼿脚； 2. 继续往下翻，咦看到了他们的 setter getter ⽅法，我去，我震惊了，，你有⽅法你就写清楚啊，不明不⽩的，你 搞鸡⼉ 啊
还好我有 锲⽽不舍 的精神（纯属⾃吹，不要拿⼑砍我），其实是强迫症患者的我；
3. 接下来我就给他动 ⼿术 了（因为我展⽰的是⼀张图⽚，所以动 ⼿术 的时候，也⽅便些，嘿嘿）
二氧化氮4. 上代码：在原⽂档代码中，把下边这段代码放到 methods 中，然后在 <Upload> 中加⼊上传中的钩⼦ :on-
progress="handleProgress" 即可：
handleProgress(event, file, fileList){
console.log('上传中', event);// 继承了原⽣函数的 event 事件
console.log('上传中 file', file);// 上传的⽂件
console.log('上传中 fileList', fileList);// 上传⽂件列表包含file
// uploadList 就是原⽂档中的那个渲染的 uplist 是个数组，所以要把filelist 赋值给他
this.uploadList = fileList
// 调⽤监听上传进度的事件
progress=(event)=>{
let uploadPercent =parseFloat(((event.loaded / al)*100).toFixed(2))// 保留两位⼩数，具体根据⾃⼰需求做更改
// ⼿动设置显⽰上传进度条以及上传百分⽐
file.showProgress =true
file.percentage = uploadPercent
}
}
3. ⾄此就实现了官⽅⽂档中实例的样⼦（⾃定义上传图⽚）， 有不对的地⽅，欢迎⼩伙伴们吐槽；
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议