element-ui中的图片上传-代码详细版

< el-upload

class= "avatar-uploader"

:show-file-list=" false"

with-credentials //携带cookie

name= "file"

                :action="uploadUrl()"

:on-error=" uploadError"

:on-success=" handleAvatarSuccess"

:before-upload=" beforeAvatarUpload"

enctype= "multipart/form-data" >

< img v-if=" imageUrl" :src=" noticeImageUrl" class= "avatar" >

< i v-else class= "el-icon-plus avatar-uploader-icon" ></ i >

</ el-upload >

下边是方法，执行顺序：beforeAvatarUpload ---执行action提交----执行handleAvatarSuccess or uploadError

uploadUrl() {

        var url = process.env.BASE_API + "url" // 生产环境和开发环境的判断

        return url

},

    uploadError() {

this. $message. error( '上传失败，请重新上传')

// this.showNoticeUploading = false

},

// 上传图片-成功

handleAvatarSuccess( res, file) {

if ( this. activeName == '1') {

this. imageUrl = URL. createObjectURL( file. raw)

this. showNoticeUploading = false

this. noticeImageUrl = res

this. noteInform. templatePicture = res

} else if ( this. activeName == '3') {

this. markingpic = URL. createObjectURL( file. raw)

this. showMarkingUploading = false

this. marketImageUrl = res

this. marketingInform. templatePicture = res

}

},

// 图片长传-之前

beforeAvatarUpload( file) {

this. showNoticeUploading = true

const isJPG = file. type === 'image/jpeg';

const isLt2M = file. size / 1024 / 1024 < 2;

if (! isJPG) {

this. $message. error( '上传头像图片只能是 JPG 格式!')

return

}

if (! isLt2M) {

this. $message. error( '上传头像图片大小不能超过 2MB!')

return

}

},