element多图上传和回显

管理后台列表页，经常遇到一个需求就是多图的上传以及回显，直接来看列子

// html代码
<el-upload
   ref="cleanUpload"
   class="upload-demo"
   :action="uploadAPIUri"
   accept="image/jpeg, image/gif, image/png"
   :headers="uploadHttpHeader"
   :limit="9"
   :multiple="true"
   :on-exceed="exceed"
   :on-remove="handleremove"
   :on-success="handleUploadSuccess"
   :file-list="fileList"
   list-type="picture-card"
   :before-upload="beforeAvatarUpload"
>
   <i slot="default" class="el-icon-plus"></i>
   <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb，推荐尺寸750*962</div>
</el-upload>

// 在element官网中，我们可以找到对应的一些参数，比如limit 上传的图片数量，on-remove 移除图片触发的事件，fileList 图片存储容器等等

fileList是图片存储容器，从官网可以看出，它的格式是fileList:[{url:xxx.jpg}]，如果是多图，格式则为fileList:[{url:xxx,jpg},{url:xxx.png}]，不难看出，是数组对象的格式，回显只需要吧后台返回的数据转成这样子就是了，
以我们后台给我返回的数据为例，后台返回了pictures字段，是一个字符串，用逗号拼接起来的多图，大概这样pictures:'xxx.jpg,xxx.png,xxxx.jpg'
这个时候，只需要用join()和split()配合一下就可以了
转化后的样式大概长这样let newPictures = ['xxx.jpg','xxx.png','xxxx.jpg']，然后只需要

this.fileList = this.form.uploadUrl.map(i=>{
     var obj = {}
     obj.url = i
     return obj
 })

就可以达到回显的效果了

上传同理，如果后台需要返回字符串，就用join()方法去转换一下，上传多图就往数组里面push上传成功以后拿到的url地址，再写交互就好了