<el-upload
name="multipartFiles" //设置上传文件的file参数值类似于formData.append("multipartFiles":file)
:on-exceed="handleExceed"//拦截触发非法验证提示
class="uploadaDVen"
multiple
:action="imgUrls" //上传文件的地址
:on-success="handleVideoSuccessInside" //上传文件成功后返回的地址
:headers="headers" //{token:this.token}
:file-list="fileList" //接收所传的文件格式为数组
:data="{pathType:5}" //自定义传参类似于formData.append('pathType':5)
ref='upload'
list-type="picture-card" :limit="1" //仅允许传1个文件多传会触发on-exceed事件>
<div style="margin-top:20px;color:#cccccc;">
<div>
<i slot="default" style="color:#cccccc;font-size:35px;" class="el-icon-camera-solid"></i>
</div>
<div>
添加照片
</div>
</div>
<div slot="file" slot-scope="{file}">
<img class="el-upload-list__item-thumbnail"
:src="file.url" alt="" >
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)" >//执行放大
<i class="el-icon-zoom-in"></i>
</span>
<span v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)" > //执行删除
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
methods:{
handleExceed(files, fileList) {
this.$message.warning(`提示`);
},
//场馆内部图片地址转换
handleVideoSuccessInside(file){
console.log(file);
if(file.success){
this.ruleForm.venueInnerImg[0]=file.data;
}else{
this.$message({
message:file.msg,
type:'error'
})
}
},
handleRemove(file) {
if(this.$refs.upload.uploadFiles.length>0){
console.log('进来了');
// this.fileList.splice(this.fileList.indexOf(file),1)
this.$refs.upload.uploadFiles.map((val,index)=>{
if(val.uid==file.uid){
this.$refs.upload.uploadFiles.splice(index,1);
return;
}
})
}
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
}