用elementui 实现图片上传
时间: 2023-05-20 10:06:15 浏览: 106
可以使用 elementui 中的 el-upload 组件来实现图片上传。具体实现步骤如下:
1. 在需要上传图片的页面中引入 elementui 组件库和相关样式文件。
2. 在页面中添加 el-upload 组件,并设置相关属性,如 action、headers、name、show-file-list 等。
3. 在 el-upload 组件中添加 el-button 组件,用于触发上传操作。
4. 在上传成功后,可以通过 el-upload 组件的 success 回调函数获取上传成功后的文件信息,并进行相关操作。
下面是一个简单的示例代码:
<template>
<div>
<el-upload
class="upload-demo"
action="/upload"
:headers="{ Authorization: 'Bearer ' + token }"
:name="'file'"
:show-file-list="false"
:on-success="handleSuccess"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
token: 'your_token_here'
}
},
methods: {
handleSuccess(response, file, fileList) {
console.log(response)
console.log(file)
console.log(fileList)
// 处理上传成功后的操作
}
}
}
</script>
注意:在实际开发中,需要根据具体需求进行相关配置和处理。
阅读全文