Element-ui实现图片上传和表单提交功能，打开表单弹框，显示上传图片

<el-upload
     class="upload-demo"
     accept="image/jpeg,image/jpg,image/png"
     name="img"
     ref="img"
     action="/help/upload"
     :file-list="fileList"
     :on-error="handleError"
     :on-success="handleSucess"
     list-type="picture">
     <el-button size="small" type="primary">点击上传</el-button>
     <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

效果图如下：

accept：
此参数是只接受上传文件的类型，因为我只上传图片，所以我支持了几种常见图片的格式

name：
此name的值将是upload组件渲染出input中type=file的name的值，这个值应该会和后端事先定义好
即<input type="file" name="img" accept="image/jpeg,image/jpg,image/png" class="el-upload__input">

ref：
这个值我是方便以后获取upload组件渲染后的img的src的，后面会出示代码

this.$nextTick(()=>{
                    const imgs = this.$refs.img.$el.childNodes[2].getElementsByTagName('img')[0]
                    imgs.setAttribute("src",res.rows[0].imgName)
                    this.$refs.img.$el.style.pointerEvents = 'none'
})

上传成功后,关闭弹框，重新打开我的弹框，我发现我的图片src没有，因为此时我没有拿到他的src,所以我通过上面的方法实现了。之后我发现我去点upload组件渲染后那个区域，图片的src就会没了，导致我图片无法显示，所以我将那块区域添加style="pointer-events"，此时我就无法点击那个区域了。但此时你上传打开弹框时，要将这个syle去掉。

action：
这个是图片上传的服务器的地址，必填字段

:file-list
这个是上传图片的信息，我们可以把上传成功后图片的src和name存进去，类型是数组
 

:on-success/:on-error
分别是图片上传成功/失败绑定的函数，在函数里面我们可以进行一些操作，我们可以拿到成功或者失败的的图片信息
 

:on-remove
移除上传文件时的钩子

:on-exceed
超出上传文件限制的钩子

:limit
这个参数之前我是加上去的，因为我的需求是只能上传一张图片，但是我发现限制一张图片，我重复上传，新上传的图片不会覆盖之前的图片，而且重新上传图片我去触发on-remove，on-exceed都没法删除之前的图片。后拉发现我不限制上传图片的限制，只要上传图片成功后，就把之前的图片给删除就可以，此操作可以在on-success里面进行操作，代码

handleSucess(response, file, fileList){
            console.log(response)
            console.log(fileList[0])
            console.log(file)
            if(fileList.length>1){
                fileList.shift()
                fileList.length = 1
                this.form.imgName = response;
            }
}

上传成功后，会将成功后的信息返回给你，response是我当前上传成功图片的src，file是我当前上传成功图片的所有信息，fileList是我所有上传图片的信息集合。我只要判断我这个数组大于1，那么我把这个数组里面的前一个给删掉，但是shift()操作不改变数组的长度，所以再将length置为1即可。

希望发现更好的解决方案的，可以告诉我~~~~~~