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

相关推荐
Kier16 天前
🚀 前端实战:优雅地实现一个通用Blob文件下载方法
前端·javascript·axios
小钻风336623 天前
深入浅出掌握 Axios(持续更新)
前端·javascript·axios
香蕉可乐荷包蛋1 个月前
vue对axios的封装和使用
前端·javascript·vue.js·axios
每一步都算数1 个月前
Axios 取消请求的演进:CancelToken vs. AbortController
axios
blues_C1 个月前
九、【前后端联调篇】Vue3 + Axios 异步通信实战
vue.js·后端·django·axios·drf·测试平台
FungLeo1 个月前
Axios 如何通过配置实现通过接口请求下载文件
axios·接口下载文件·接口download
淡笑沐白2 个月前
Axios全解析:从基础到高级实战技巧
axios
前端OnTheRun2 个月前
新闻客户端案例的实现,使用axios获取数据并渲染页面,路由传参(查询参数,动态路由),使用keep-alive实现组件缓存
vue.js·axios·vue2·路由·vue-router
2301_799404912 个月前
AJAX 介绍
前端·ajax·axios
一只程序烽.2 个月前
err: Error: Request failed with status code 400
java·axios·web