element-ui el-upload 文件上传 解读

el-upload上传
在标签上可以配置，这里推荐v-bind 动态绑定方法
参数action后面写上传到服务器端的地址（地址）

<el-upload
    class="avatar-uploader"
    ref="upload"
    list-type="picture-card"
    :action="iconImageUrl"
    :data="{fileType: form.class}"
    :file-list="[{url: form.image}]"
    :on-success="handleUploadSuccess"
    :on-remove="handleRemoveCover"
    :before-upload="beforeImageUpload">            
    <i class="el-icon-plus"></i>
</el-upload>

data参数是专门配置上传时所需的参数的。这里也用了动态绑定的方法。
在data里面定义了class。相当于配置了 fileType=category 这样的参数名和参数值
“`
form: {
class: ‘category’,
categoryName: ”,
introduction: ”,
sortShow: 0,
image: ”,
id: ”
},

on-change   可选参数, 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

当然file和fileList也有用。

比如

handleRemove(file, fileList) {
console.log(file, fileList);
}
“`
这里的file是个对象，里面包含图片的一些信息。我们可以拿到file对象中的一些信息，包括图片的name,size，url 等等信息

on-remove 可选参数, 文件列表移除文件时的钩子
on-success 可选参数, 文件上传成功时的钩子