axios进行图片上传组件封装

文章目录


前言

node项目使用 axios 库进行简单文件上传的模块封装。


图片上传接口(axios通信)

新建upload.js文件,定义一个函数,该函数接受一个上传路径和一个表单对象,然后将表单数据以 multipart/form-data 的形式上传到指定的路径。

图片上传

在 Vue 中创建一个新的 .vue 文件:Upload.vue文件

使用upload

导入

javascript 复制代码
import upload from '@/util/upload';
import Upload from '@/components/upload/Upload';
javascript 复制代码
<el-form-item label="头像" prop="avatar">
	<Upload:avatar="userForm.avatar" @uploadChange="handleChange" />
</el-form-item>

//@uploadChange事件 显示图片回调
const handleChange = file => {
    userForm.avatar = URL.createObjectURL(file)
    userForm.file = file
};

上传头像效果展示


总结

node项目使用 axios 库对上传图片组件的封装;图片上传接口、使用Vue和Element Plus的组合来创建一个上传头像的功能,利用父子组件通信

相关推荐
Xzh04231 分钟前
前后端学习的交界
java·ajax·maven·axios·测试
sniper_fandc12 天前
Axios快速上手
vue.js·axios
keep_di19 天前
05-vue3+ts中axios的封装
前端·vue.js·ajax·typescript·前端框架·axios
BXCQ_xuan25 天前
软件工程实践八:Web 前端项目实战(SSE、Axios 与代理)
前端·axios·api·sse
Zz_waiting.1 个月前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
williamdsy2 个月前
【Element-Plus】媒体预览模态框优化实战:从复杂到简洁的设计之路
vue·媒体·element-plus
Pu_Nine_92 个月前
Axios 实例配置指南
前端·笔记·typescript·axios
狂炫一碗大米饭2 个月前
JavaScript 中的 Axios:如何发出GET、POST、PUT和DELETE请求
axios
Nayana2 个月前
axios-取消重复请求--CancelToken&AbortController
前端·axios
陪我一起学编程2 个月前
创建Vue项目的不同方式及项目规范化配置
前端·javascript·vue.js·git·elementui·axios·企业规范