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的组合来创建一个上传头像的功能,利用父子组件通信

相关推荐
阿髙4 天前
ios的safari下载文件 文件名乱码
前端·axios·safari·下载
一雨方知深秋5 天前
智慧商城:搜索页面基于商品名称进行搜索,分类页面点击商品进行搜索。(跳转到商品列表页面,地址栏携带的参数作为请求的参数进行请求,然后动态渲染)
前端·javascript·vue.js·axios·get·query·params
一雨方知深秋10 天前
购物车案例--分模块存储数据,发送请求数据渲染,底部总计数量和价格
前端·javascript·vue.js·axios·vuex·actions·mutations
lulu_063213 天前
safari 浏览器输入框 focus时不显示那一闪一闪的图标
前端·css·vue·safari·element-plus
啊·贤16 天前
初级报错:循环引用
前端·javascript·vue3·axios
励碼17 天前
从一个Bug谈前端响应拦截器的应用
前端·vue·bug·axios
景天科技苑20 天前
【Vue axios】vue中如何通过axios异步请求后端接口
前端·javascript·vue.js·axios·异步请求
Serenity_Qin20 天前
vue3 + ts 使用 el-tree
前端·vue.js·typescript·vue3·element-plus
虚诚22 天前
el-selet下拉菜单自定义内容,下拉内容样式类似表格
vue.js·element-plus·下拉菜单
前端与小赵1 个月前
什么是Axios,有什么特点
前端·axios