element-ui 上传图片，图片404

介绍背景：

使用element-ui vue，在页面中填写商品信息并保存后，上传商品相关图片。图片存放到阿里云上。如上传两张图片，图片命名为goodsId-01.jpg和goodsId-02.jpg

出现的问题：

新建商品时-图片显示：

商品信息保存成功的那一刻，图片变成：

问题原因：

因为图片默认显示路径下没有图片。所以显示小碎图。

---------------------------------

展示小碎图代码代码→：

<template> 标签中

<div class="container"><div class="form-box"><el-form ref="form" :model="form" label-width="2500px">  <el-row >  <el-col :span="20" >     <span>{{this.form.goodsName}}</span><br><br> <div style="height:50px;font-size:13px;color: #8c939d;"><div>第一张图  http://阿里云存图片路径/{{this.form.goodsId}}-01.jpg<br/></div><br/></div><div style="width:400px;">  // 利用:data="goodsIdStr"传参，用于后台命名，如果命名不需要传参可以省略                     <el-upload class="avatar-uploader" :headers="headerObj" action="/上传访问后台方法路径" :show-file-list="false" :on-success="handleAvatarSuccess" :data="goodsIdStr" :before-upload="beforeAvatarUpload" ><img v-if="indexPicture" :src="indexPicture" class="avatar" style="width:200px;height:200px;border-radius: 6px;border: 4px solid #DFDFDF;"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></div>  </el-col><el-col :span="4">     <span> </span><br><br>          <div style="height:50px; font-size:13px; color:#8c939d; width:500px;"><div>第二张图  http://阿里云存图片路径/{{this.form.goodsId}}-02.jpg</div><br/></div><div style="width:400px;">                       <el-upload class="avatar-uploader" :headers="headerObj" action="/上传访问后台方法路径" :show-file-list="false" :on-success="handleAvatarSuccess1" :data="goodsIdStr" :before-upload="beforeAvatarUpload" ><img v-if="rockOne" :src="rockOne" class="avatar" style="width:200px;height:200px;border-radius: 6px;border: 4px solid #DFDFDF;"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>                          </div>  </el-col></el-row></el-form></div>
</div>

script的create()中

return {if (goodsId != null && goodsId != '' && goodsId !=undefined) {this.img1 = "http://阿里云存图片路径/"+goodsId+"-01.jpg?random="+Math.random();this.img2 = "http://阿里云存图片路径/"+goodsId+"-02.jpg?random="+Math.random();}
},

methods中

handleAvatarSuccess(res, file) {this.img1 = URL.createObjectURL(file.raw);
},
handleAvatarSuccess1(res, file) {this.img2 = URL.createObjectURL(file.raw);
},
// 上传图片
beforeAvatarUpload(file) {                   const isJPG = file.type === 'image/jpeg';const isLt2M = file.size < 71680;this.goodsIdStr.goodsId = this.form.goodsId; // 利用goodsIdStr传参，用于后台命名，如果命名不需要传参可以省略if (!isJPG) {this.$message.error('上传图片只能是 JPG 格式!');}if (!isLt2M) {this.$message.error('上传图片大小不能超过 70KB,请调整清晰度之后再试！');}return isJPG && isLt2M;
},

--------------------

解决：

在<template> 标签中，@error="indexPictureError(indexPicture)"，表示出错的时候访问方法，可以直接写默认图片的路径。我是直接给空。

<div class="container"><div class="form-box"><el-form ref="form" :model="form" label-width="2500px">  <el-row >  <el-col :span="20" >     <span>{{this.form.goodsName}}</span><br><br> <div style="height:50px;font-size:13px;color: #8c939d;"><div>第一张图  http://阿里云存图片路径/{{this.form.goodsId}}-01.jpg<br/></div><br/></div><div style="width:400px;">                       <el-upload class="avatar-uploader" :headers="headerObj" action="/上传访问后台方法路径" :show-file-list="false" :on-success="handleAvatarSuccess" :data="goodsIdStr" :before-upload="beforeAvatarUpload" ><img v-if="indexPicture" :src="indexPicture" class="avatar" style="width:200px;height:200px;border-radius: 6px;border: 4px solid #DFDFDF;" @error="indexPictureError(indexPicture)"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></div>  </el-col><el-col :span="4">     <span> </span><br><br>          <div style="height:50px; font-size:13px; color:#8c939d; width:500px;"><div>第二张图  http://阿里云存图片路径/{{this.form.goodsId}}-02.jpg</div><br/></div><div style="width:400px;">                       <el-upload class="avatar-uploader" :headers="headerObj" action="/上传访问后台方法路径" :show-file-list="false" :on-success="handleAvatarSuccess1" :data="goodsIdStr" :before-upload="beforeAvatarUpload" ><img v-if="rockOne" :src="rockOne" class="avatar" style="width:200px;height:200px;border-radius: 6px;border: 4px solid #DFDFDF;" @error="rockOneError(rockOne)"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>                          </div>  </el-col></el-row></el-form></div>
</div>

methods中加入方法：

indexPictureError(indexPicture) {this.indexPicture= '';
},

=================

以下是保存商品，生成goodsId之后，上传一张图片的样式

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

el-upload标签属性

action：访问后台路径

:on-success：上传成功后访问的方法

:data：上传图片往后边传参

:before-upload：上传之前访问的方法（验证图片）