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：上传之前访问的方法（验证图片）