el-upload 上传以及读取问题

Question

使用el-upload组件上传，上传是可以了，但是如何读取文件到列表
比如 我有一个主表有着附件，新增时候可以上传了 但是编辑时候如何读取数据到el-upload的上传列表中？
代码如下
'<el-upload

ref="upload"
class="avatar-uploader"
action="#"
:show-file-list="true"
:before-upload="beforeAvatarUpload"
:on-remove="handleRemove"
:http-request="upload"

<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button size="small" type="primary" @click="test()">测试</el-button>

</el-upload>'
`export default {

model: {
  prop: 'fileList',
  event: 'change',
},
props: {
  fileList: Array,
  size: {
    type: Number,
    default: 1,
  },
},
data () {
  return {
    uploadUrl: 'major/upload/upload', // 图片上传路径 例: '/ueditor/dynamic/imgUpload;
  }
},
methods: {
  init () {

  },
  upload (f) {
    const file = f.file
    const form = new FormData()
    form.append('file', file)
    this.$http({
      url: this.$http.adornUrl(this.uploadUrl),
      method: 'post',
      data: form,
      processData: false,
      contentType: false,
      dataType: 'json',
      async: false,
    })
      .then(({ data }) => {
        if (data && data.code === 200) {
          file.dataBaseUrl = data.data
          this.fileList.push(file)
        } else {
          this.$message({
            message: '上传文件失败',
            type: 'warning',
            duration: 1500,
          })
          this.$refs.upload.uploadFiles.pop()
        }
        this.loading = false
      })
      .catch(error => {
        console.log(error)
        this.loading = false
        this.$refs.upload.uploadFiles.pop()
        this.$message({
          message: '上传文件失败',
          type: 'warning',
          duration: 1500,
        })
      })
  },
  // 上传图片前的过滤
  beforeAvatarUpload (file) {
    return true
  },
  test () {
    console.log(this.fileList)
  },
  handleRemove (file) {
    this.fileList.splice(this.fileList.findIndex(item => item.uid === file.uid), 1)
  },
},

}`

Answer 1

建议自己在el-upload中写一个列表样式，然后将获取到的图片列表在这个列表中循环渲染即可，上传时将后端返回的图片地址或者取本地图片base64放到el-upload中的变量中
<el-upload>
<div v-for="item in piclist"></div>
<el-upload>
类似这样
上传成功后，如果后端返回的是图片地址，这将图片地址push到piclist中
编辑的时候将列表中的值直接赋值给piclist即可