利用el-upload组件在vue中上传文件

以上传图片为例：

action：使用的接口地址

on-change：改变时调用的方法

file-list：文件列表

limit：限制上传文件的数量

on-success：成功后调用的方法

on-exceed：文件超出个数限制时调用的方法

更多属性参考官方文档：Element - The world's most popular Vue UI framework

<el-upload
    class="upload-demo"
    action="服务器后端ip/system/Panda/panda/uploadcover"
    :on-change="handleChange"
    :file-list="fileList"
    :limit="1"
    :on-success="handleSuccess"
    :on-exceed="handleExceed"
>
    <el-button size="small" type="primary"
        >选择文件</el-button
    >
    <!-- <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
    </div> -->
</el-upload>

fileList: [],

handleChange(file, fileList) {
    this.fileList = fileList.slice(-1);
},
handleExceed() {
    //提示最多只能上传1个
    this.$message.warning("最多上传1个文件！");
},
handleSuccess(response, file, fileList) {
    // response是接口成功后返回的数据，看返回数据处理后续逻辑，我这里返回的是文件名，需要传递给表单中的image属性
    this.ruleForm.image = response.data;
},