请教一个关于element-ui文件上传的问题

Question

项目中要用到element-ui中文件上传的功能，要求做成照片墙的功能，文档如下

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog v-model="dialogVisible" size="tiny">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
</script>

1 直接把文档贴上即可实现文件上传的样子
2 但项目中，会有些已上传过的图片，要求加载好就显示成这样

求教各位大神 我该怎么实现，万分感谢

Answer 1

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :file-list="img_list"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>

在el-upload中添加一个 file-list属性,上传成功和移除都是操作这个数组,这个数组的结构就是

img_list: [
             {
                 name: 'food.jpeg',
                 url : 'http://ogew07qik.bkt.clouddn.com/1720170712172004_221104ChMkJ1YgmrqINnjWAAJNuXWyC8UAADvFwOY3rYAAk3R899.jpg',
             },
        ],

你从远程获取的图片路径也组成name,url的格式就能正常显示出来了,具体解释参考官方文档

Answer 2

看文档要看到底啊。

最下面的Attribute中有介绍on-success的回调function(response, file, fileList)，可以在上传成功后，打出来看看分别代表什么。

按照你的需求，你需要通过上传成功的回调，来接收file.url，然后传给后端去保存。
所以，对于第二个需求，你需要做的无非就是用一个array去接后端传过来的url数组，布局展示。
以后每次上传成功后，要做的事情就是：获得file.url传给后端，并且push到那个array数组中。

Answer 3

你是想页面加载要显示已完成上传后的图片吧，就写个ul把用<li v-for="img in imgs"><img :src="img.src"></li>遍历已上传图片的数据就行了，在mounted里面用get请求已经上传的图片的json数据，然后放在imgs里就能看到已完成上传后的图片了，用css处理一下就行了

Answer 4

获取之前上传的json后绑定到file-list设置的数组里

Answer 5

不好意思 刚看见 问题解决了么？