element-plus是一款基于Vue 3的UI组件库,它提供了一系列常用的UI组件以及丰富的特色功能。其中包括图片上传,可以通过el-upload组件实现。下面是基于element-plus vue3的图片上传例子:
<template>
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:headers="{
Authorization: 'Bearer ' + token
}"
:on-success="handleSuccess"
:data="{id: imageId}">
<el-button size="small" type="primary">点击上传图片</el-button>
</el-upload>
</template>
<script>
import { ref } from 'vue';
import { ElUpload, ElButton } from 'element-plus';
export default {
components: {
ElUpload,
ElButton,
},
setup() {
const token = ref('your_token_here');
const imageId = ref(1);
function handleSuccess(response, file, fileList) {
console.log(response, file, fileList);
}
return {
token,
imageId,
handleSuccess,
};
},
};
</script>
其中action
用于指定上传图片的路径,headers
用于设置请求头信息,on-success
用于处理上传成功后返回的信息。在这个例子中,使用了ref来定义状态,使用setup函数来设置组件的逻辑。