el-upload修改封面图

1. 定义elementui代码。

　　1.1 action：服务器上传地址。

　　1.2 data：后端需要的参数。

　　1.3 list-type：图片上传成功后显示的样式。

　　1.4 show-file-list 是否显示上传成功的图片列表。

　　1.5 before-upload 验证图片上传格式。

　　1.6 on-success 图片上传成功后的回调函数，这里对showImage1进行赋值。

<el-form-item label="上传图片" prop="requreImage">

　　<el-upload 

       class="avatar-uploader"

       ref="image"

       :action="userResource+'/api/post/file'" 

       :data='date'

       list-type="picture-card"

       :show-file-list="false"

       :before-upload="beforeUpload"

       :on-success="success"

      >

       <!-- 这里很重要，showImage1有值封面图则显示showImage1的值，没有则显示封面图Logo。 -->

       <img v-if="showImage1" :src="showImage1" class="avatar el-icon-plus" />

       <!-- 封面图logo。 -->

       <i slot="default" class="el-icon-plus"></i>

   </el-upload>

</el-form-item>

 

2. 定义success方法。

// 上传图片

success(res, files) {

　　// 这里res.result每次执行成功后返回的都是最新的图片路径。

   this.showImage1 = JSON.parse(JSON.stringify(loot.SERVE.file + res.result));

},