Element UI 上傳圖片組件（支持多傳和單傳），報錯Cannot set property 'status' of null

使用組件頁面代碼：

<d2-upload v-model="form.uploaderUrlArray" :limit="5" accept=".png,.jpg,.jpeg" multiple />

組件代碼，我這裏圖片是上傳到七牛服務器的。注意fileLIst是隻讀的，不能修改。我們這裏使用uploadList來保存我們需要改動的數組，否則報錯Cannot set property 'status' of null：

<template>
  <div :class="{exceed: isExceed}">
    <el-upload action="https://up.qbox.me/" :data="postUploadData" :before-upload="beforeUpload"
      list-type="picture-card" :on-preview="handlePictureCardPreview" :file-list="fileList" :on-remove="handleRemove"
      v-bind="$attrs" :on-exceed="handleOnExceed" :on-success="handleOnSuccess">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <image-viewer :z-index="3000" v-if="showViewer" :on-close="closeViewer" :url-list="previewSrcList" />
  </div>
</template>
<script>
import imageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  name: 'd2-upload',
  components: { imageViewer },
  props: {
    value: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      options: [],
      fileList: [],
      uploadList: [], // 自定義的數組，用於處理fileList，fileList是隻讀的
      dialogImageUrl: '',
      fileUrl: '',
      postUploadData: {},
      dialogVisible: false,
      isInternal: false,
      isExceed: false,
      showViewer: false,
      previewSrcList: []
    }
  },
  watch: {
    value: {
      handler (val) {
        if (!this.isInternal) {
          if (!this.uploadList.length) {
            this.fileList = val.map(item => {
              return {
                url: item
              }
            })
          }
          this.setIsExceed()
        } else {
          this.isInternal = false
        }
      },
      immediate: true
    }
  },
  methods: {
    async beforeUpload (file) {
      let res = await this.getUploadToken({
        mimeType: file.type || file.raw.type,
        type: 'IMAGE'
      })
      this.postUploadData = {
        token: res.token,
        key: res.fileName
      }
      this.uploadList.push(res.fileUrl)
      return true
    },
    getUploadToken (data = {}) {
      return new Promise((resolve, reject) => {
        this.$http.get('/cl-system/medias/uploadToken', data).then(res => {
          resolve(res.data)
        }).catch((res) => {
          reject(res)
        })
      })
    },
    handleOnExceed (file, fileList) {
      this.$message.warning('數量超出限制')
    },
    handleRemove (file, fileList) {
      let index = this.fileList.findIndex(item => {
        return file.url === item.url
      })
      this.uploadList.splice(index, 1)
      this.isInternal = true
      this.fileList = fileList
      this.emitData(this.uploadList)
      this.isExceed = false
    },
    handlePictureCardPreview (file) {
      this.previewSrcList = this.fileList.map(item => item.url)
      this.showViewer = true
    },
    handleOnSuccess (response, file, fileList) {
      this.fileList = fileList
      this.isInternal = true
      this.setIsExceed()
      this.emitData(this.uploadList)
    },
    emitData (list) {
      this.$emit('input', list)
    },
    closeViewer () {
      this.showViewer = false
    },
    setIsExceed () {
      if (this.$attrs.limit && this.fileList.length >= this.$attrs.limit) {
        this.isExceed = true
      } else {
        this.isExceed = false
      }
    }
  },
  mounted () {
  }
}
</script>
<style scoped>
.exceed >>> .el-upload {
  display: none;
}
</style>