vue上传图片
vue后台管理项目经常会遇到表单中上传图片的需求,我们运用element中的upload就可以实现这个功能,效果如下。在使用upload之前建议大家去读一边upload的文档,知道每个属性都是干什么的,到这里就完成了图片上传的操作了。先看下后端给的接口文档。
·
vue后台管理项目经常会遇到表单中上传图片的需求,我们运用element中的upload就可以实现这个功能,效果如下
可以删除,预览
在使用upload之前建议大家去读一边upload的文档,知道每个属性都是干什么的,
减少不必要的麻烦
先看下后端给的接口文档
再看下我的代码
<el-upload action="/api/admin/uploade" multiple list-type="picture-card" :data="fileData" name="img"
accept="image/jpeg,image/png,image/jpg" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
:on-success="handleimg">
<el-icon>
<Plus />
</el-icon>
<template #tip>
<div class="el-upload__tip">只能上传jpg/png/jpeg文件,且单个不超过2M</div>
</template>
</el-upload>
<el-dialog v-model="dialogVisible">
<img w-full :src="imageUrl" alt="Preview Image" />
</el-dialog>
export default {
data() {
return {
imageUrl: '',
dialogVisible: false,
fileData: { // 额外参数
id: ''
},
},
handleRemove(img, fileList) {
console.log(img, fileList);
},
handlePictureCardPreview(img) {//这里需要注意 用的img并不是file,因为接口文档给的是img,我们在upload中定义个name=“img”参数就可以了
// 检查文件类型
const isImage = img.raw.type.includes("image");
if (!isImage) {
this.$message.error("上传文件类型必须是图片!");
return false
}
// 检查文件大小
if (img.size > (2 * 1024 * 1024)) {
this.$message.error(`上传文件大小不能超过10Mb`);
this.$refs['refUpload'].handleRemove(img);
return false;
}
// 检查文件数量
if (fileList.length > 1) {
this.$message.error(`上传文件最大数量为1`);
this.$refs['refUpload'].handleRemove(img);
return false;
}
this.ImageUrl = img.url;
this.dialogVisible = true;
},
handleimg(res, img, fileList) {
console.log(img);
console.log(fileList);
if (res.code === 200) {
this.url = res.data.file
} else {
this.$message.error(`图片${img.name}上传失败`)
}
},
}
到这里就完成了图片上传的操作了
更多推荐
已为社区贡献3条内容
所有评论(0)