前言
总要写点东西吧，最近忙于项目，github上的问题也没处理，博客也没咋写，自媒体上的东西也没咋发，随手记录一下当前项目改造时候遇到的问题吧；
upload: https://element.eleme.cn/#/zh-CN/component/upload
内容
before-upload
借助于
:before-upload来进行校验，使用FileReader和Image来获取图片宽高,为了让代码更通用，我们可以进行以下的封装;
getImageSize(file) { return new Promise((resolve, reject) => { const reader = new FileReader() reader.onload = e => { const image = new Image() image.onload = () => { resolve({ width: image.width, height: image.height }) } image.src = e.target.result } reader.readAsDataURL(file) }) },
伪代码
<el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :before-upload="beforeProductImageUpload" :on-remove="handleRemove"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> <script> export default { data() { return { dialogImageUrl: '', dialogVisible: false }; }, methods: { handleRemove(file, fileList) { console.log(file, fileList); }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, beforeProductImageUpload(file) { const imgType = ['image/png', 'image/jpeg', 'image/jpg'].includes(file.type) if (!imgType) { this.$message.warning('产品主图只允许JPG/PNG/JPEG格式') return false } return this.getImageSize(file).then(size => { if (size.width !== 108 && size.height !== 108) { this.$message.warning('产品主图尺寸必须为108*108') return Promise.reject() } }) }, } } </script>
Tips
为了回显一般都会增加
file-list，不过这个会导致上传时前后部分数据不一致，触发闪动，所以这里直接把相应的css效果干掉
:deep(.el-upload-list__item.is-ready) { display: none; }
学无止境,谦卑而行.
