upload上传图片

需求分析：
1.添加商品页面可以添加图片
2.编辑商品页面可以编辑图片（原来的图片列表上）

子组件 (ImageUpload.vue)：

<template>
    <div>
        <div class="flex-img">
            <div class="flex-img__item" v-for="(image,index) of imageList" :key="index">
                <div>
                    <img class="flex-img__image" :src="image">
                </div>
                <i class="el-icon-error right-up" @click.stop="handleRemove(index)"></i>
            </div>

            <el-upload
                    :action="uploadUrl"
                    :show-file-list="false"
                    accept="image/jpeg,image/jpg,image/png"
                    list-type="picture-card"
                    :limit="imgNumber"
                    :on-success="handleSuccess"
                    :before-upload="beforeUpload">
                <i class="el-icon-plus"></i>
            </el-upload>
        </div>

        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1M</div>
    </div>
</template>

<script>
    export default {
        props: {
            imageList: Array,
            clearList: Number,
            imgNumber: Number
        },
        data() {
            return {
                uploadUrl: 'http://xxxx.xxx.xx/api/upload',
                fileList: this.imageList ? this.imageList : [],
            };
        },
        watch: {
            imageList(value) {
                    this.fileList = value;
            },
            clearList() {
                this.fileList = [];
            },
            fileList(value) {
                this.$emit('update:imageList', value);
            }
        },
        methods: {
            handleRemove(index) {
                this.fileList.splice(index, 1);
            },
            handleSuccess(response) {
                this.fileList.push(response.url);
            },
            beforeUpload(file){
                const imageSize = file.size / 1024 / 1024 < 1;
                if(!imageSize){
                    this.$message.error('上传封面大小不能超过 1MB!');
                }
                return imageSize;
            }
        }
    };
</script>

<style scoped>
    .flex-img
    {
        display: flex;
    }
    .flex-img__item
    {
        position: relative;

        box-sizing: border-box;
        width: 148px;
        height: 148px;
        margin: 0 8px 8px 0;

        border: 1px solid #c0ccda;
        border-radius: 6px;
        background-color: #fff;
    }
    .right-up
    {
        position: absolute;
        z-index: 1024;
        top: -5px;
        right: -5px;
    }
    .flex-img__image
    {
        width: 146px;
        height: 146px;

        border-radius: 6px;
    }

</style>

父组件：

<template>
  <div>
     <image-upload :imageList.sync="imageShows" :clearList="clearList"></image-upload>
  </div>
</template>
<script>
import ImageUpload from '../../components/ImageUpload.vue';
export default{
  components:{
     ImageUpload
  },
  data(){
     clearList:null,//清除图片列表
     imageShows:[]//图片列表
  }，
  methods：{
    resetForm(){
      this.clearList = Math.random();//给一个随机数就能清除
    }
  }
}
</script>

报错信息：app.js:1608 [Vue warn]: Error in callback for watcher “fileList”: “TypeError: Cannot create property ‘uid’ on string ‘https://xxx.jpeg‘”
app.js:2724 TypeError: Cannot create property ‘uid’ on string ‘https://xxx.jpeg’
解决办法：子组件修改方法handleSuccess
handleSuccess(response) {
this.fileList.push({response.url});//多了 { }，因为它要的是数组，那就传数组进去
},