提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言
在写项目实训作业时遇到了需要上传图片的功能,分享一下方法
一、Element Plus
我这里使用的是npm安装
- 在终端中进入到项目,输入npm install element-plus --save
- 在main.js中导入Element Plus
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
- 使用上传组件
<el-upload></el-upload>
<el-upload
v-model:file-list="fileList"
action="http://127.0.0.1:8080/api/file/upload" // 上传方法url
list-type="picture-card" // 显示类型
:on-preview="handlePictureCardPreview" // 钩子函数,上传执行前调用
:on-remove="handleRemove" // 删除图片后调用
:on-success="handleSuccess" // 上传成功后调用
>
<el-icon>
<Plus/>
</el-icon>
</el-upload>
<el-dialog v-model="dialogVisible">
<img :src=