<el-upload
class="{hide:fileList2.length ===1}"
class='strategy-upload'
action=‘#’
:on-change="(file,fileList2)=>{onChange(file,fileList2)}"
:limit="limit2"
:file-list="flileList2"
list-type="picture-card"
accept='.jpg'
:auto-upload="false"
>
<div slot='default' class='icon'>
<i class="el-icon-plus"> <br/><span>更换图片</span></i>
</div>
<div slot='tip'>只支持.jpg格式</div>
<div slot='file' slot-scope="{file}">
<img :src="file.url" alt=""
style="object-fit: cover;"
>
</div>
<span>
<span @click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span>
<span
v-if='!disbaled'
@click='handleRemove2(file)'
><i class="el-icon-delete"></i></span>
</span>
</el-upload>
<script>
//获取接口图片数据并保存
async getList(){
const res = await list()
try{
if(res.data){
this.fileList2=[
{
url:res.data.coverImageUrl,
pictureUrl:res.data.coverImageUrl
}
]
}else{
this.fileList2=[]
}
}catch(e){
consolt.loe(e)
}
}
//删除图片
handleRemove2(file){
if(file.type !==2){
this.delist.push(file)
}
this.fileList2=[]
}
//预览图片
handlePictureCardPreview(file){
this.dialogImageUrl = file.url;
this.dialogVisible = true
}
getBase64(file){
return new Promise(function (resolve,reject){
let reader = new FileReader();
let imgResult = ""
reader.readAsDataUrl(file);
reader.onload = function(){
imgResult = reader.result;
}
reader.onerror = function (error){
reject (error)
}
reader.onloadend = function(){
resolve(imgResult)
}
})
},
getBase64Image(img){
let canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext('2d');
ctx.drawImage(img,0,0,img.width,img.height)
let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
let dataURL = canvas.toDataURL("image/" + ext);
return dataURL
},
defultCoverImage(url){
let img = url;
let image = new Image();
image.src = img;
image.onload = () =>{
let base64 = this.getBase64Image(image);
this.defaultCoverImageUrl64 = JSON.parse(JSON.stringify(base64))
}
},
onChange(file,fileList2){
file.type = 2;
let reader = new FileReader();
this.getBase64(file.raw).then(res=>{
file.url = res
})
this.fileList2 = fileList2
}
</script>
上传图片 upload
最新推荐文章于 2024-08-21 08:58:29 发布