【 elementUI---el-upload图片上传 】
在使用 Element UI 的 el-upload
组件进行图片上传时,你可以按照以下步骤进行:
- 确保已经安装并引入了 Element UI。
- 在你的组件模板中添加
el-upload
组件。 - 配置
el-upload
组件的相关属性,如action
用于指定上传的地址,on-success
用于处理上传成功后的逻辑。
以下是一个简单的例子:
<template>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/" <!-- 这里替换为你的图片上传API -->
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:on-success="handleSuccess"
list-type="picture"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
</el-upload>
</template>
<script>
export default {
methods: {
handlePreview(file) {
// 处理图片预览
},
handleRemove(file, fileList) {
// 处理图片移除
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`);
},
handleSuccess(response, file, fileList) {
// 处理图片上传成功
console.log('图片上传成功', response, file, fileList);
}
}
};
</script>
在这个例子中,我们定义了一个简单的图片上传组件,用户可以点击上传图片,上传成功后会调用 handleSuccess
方法。记得将 action
属性的值替换为你的实际图片上传API地址。
评论已关闭