以上传图片为例:
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;
},