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函数来设置组件的逻辑。