适用端
- uniapp和vue的PC端使用
功能介绍:
- 上传图片之前显示一个边框的样式
- 上传图片进行预览
- 点击确认上传(接口对接)
效果展示:
上传之前
上传预览(点击确定之前,未对接接口时)
具体实现:
HTML
<el-upload
action="/source/upload"
accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
:show-file-list="false"
:on-change="handleLicensePreview"
:before-upload="beforeLicenseUpload"
:auto-upload="false"
>
<img v-if="form.img" :src="form.img" class="preach-img">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
methods
// 上传图片
handleLicensePreview(file) {
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error(this.inter.sctpdx + ' 2MB!');
} else {
let fd = new FormData()
fd.append('file', file.raw)
// 存储图片,点击确认按钮时统一上传
this.form.img = URL.createObjectURL(file.raw);
this.licenseFd = fd
}
},
//图片上传限制
beforeLicenseUpload(file) {
const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
const whiteList = ["jpg", "jpeg", "png", "gif", "JPG", "JPEG"];
if (whiteList.indexOf(fileSuffix) === -1) {
this.$message.error(this.inter.scyyzz);
return false;
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error(this.inter.sctpdx + ' 2MB!');
return false;
}
}
el-upload属性值
参数 | 含义 |
---|---|
action | 不可少的一项,上传的地址 |
accept | 接受上传的文件类型 |
show-file-list | 是否显示已上传文件列表 |
on-change | 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用 |
before-upload | 是否在选取文件后立即进行上传,一般为限制文件格式等条件 |
auto-upload | 是否在选取文件后立即进行上传 |
注:绑定值根据具体情况进行相应修改
文章如有错误请指教,谢谢