美文网首页
VUE+element-上传问题

VUE+element-上传问题

作者: 猿分让我们相遇 | 来源:发表于2019-03-16 20:25 被阅读0次

需要注意的是,事件handleChange非公用状态下(就是两个页面写两个事件的那种。。),会出现其中一个事件触发不了的状态,解决办法:就是把其中一个页面的'handleChange'改个名字就好了,比如'handleChangeTwo'
template:

<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:auto-upload="false"
:on-change="handleChange">
<img v-if="schoolPhotoForm.photoUrl" :src="schoolPhotoForm.photoUrl" class="avatar">
<span v-else>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传png/jpg/jpeg图片文件,且不超过30M</div>
</span>
</el-upload>

js://上传改变状态时触发
handleChange(file){
const isPNG = file.raw.type === 'image/png';
const isJPEG = file.raw.type === 'image/jpeg';
const isJPG = file.raw.type === 'image/jpg';
const isLt30M = file.size / 1024 / 1024 < 30;
if (!isPNG&&!isJPEG&&!isJPG) {
this.message.error('上传图片只能是 JPG/PNG/JPEG 格式!'); } if (!isLt30M) { this.message.error('上传图片大小不能超过 30MB!');
}
if(isJPG||isJPEG||isPNG && isLt30M){
this.fd.append('fileData',file.raw);
this.schoolPhotoForm.photoUrl = URL.createObjectURL(file.raw);
}
},

相关文章

网友评论

      本文标题:VUE+element-上传问题

      本文链接:https://www.haomeiwen.com/subject/hbqemqtx.html