<el-upload
class="upload-demo"
:action="uploadLi"
:before-upload="beforeUpload"
:on-success="handleSuccess"
:headers="{'X-User-Token': authorization}"
name="file"
accept="image/png,image/jpg,image/jpeg,image/gif"
:multiple=false
:show-file-list=false
>
<div class="avatar" v-if="createForm.advertPic">
<img :src="createForm.advertPic" class="avatar_img">
<span>修改图标</span>
</div>
<el-button size="small" type="primary" style="height:28px;" v-else>上传</el-button>
<div slot="tip" class="el-upload__tip" style="margin-top:0px;">只能上传jpg/png/gif文件 750*1642px,1M以内</div>
</el-upload>
js:
handleAvatarSuccess(res, file) { console.log(res) console.log(file) this.imageUrl = URL.createObjectURL(file.raw); // if (res.code !== 200) { this.$message.error('上传失败!') } else { this.isShowRequest = false this.isLoad = false this.modalForm.logoId = res.body.fileId this.modalForm.logoPath = res.body.filePath } }, beforeAvatarUpload(file) { console.log(file) const isJpgPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' if (!isJpgPng) { // this.$message.error('上传文件格式只能是jpg/png') this.isLoad = true this.errText = '上传文件格式只能是jpg/png/gif' // let _t = this // setTimeout(function () { // _t.isLoad = false // },3000) return false } const isLt1M = file.size / 1024 / 1024 < 1 if (!isLt1M) { // this.$message.error('上传图片大小不能超过 1MB!') this.isLoad = true this.errText = '上传图片大小不能超过 1MB!' // let _t = this // setTimeout(function(){ // _t.isLoad = false // },3000) return false } const isSize = new Promise(function(resolve, reject){ // let width = 750; // let height = 1642; // let _URL = window.URL || window.webkitURL; let img = new Image(); img.onload = function(){ let valid = img.width / img.height === 1.67; valid ? resolve() : reject(); } img.src = _URL.createObjectURL(file); }).then(()=>{ return file; }, ()=>{ // this.$message({ // message:'上传图片比例建议为5:3!请重新选择!' // }); this.isLoad = true this.errText = '上传图片比例只能为5:3, 请重新选择上传!' return Promise.reject() return false;//必须加上return false; 才能阻止 }) return isJpgPng && isLt1M && isSize }