axios进行图片上传组件封装

2023-12-25 14:57:11

文章目录

前言

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

图片上传接口（axios通信)

新建upload.js文件，定义一个函数，该函数接受一个上传路径和一个表单对象，然后将表单数据以 multipart/form-data 的形式上传到指定的路径。
在这里插入图片描述

图片上传

在 Vue 中创建一个新的 .vue 文件：Upload.vue文件
在这里插入图片描述

使用upload

导入

import upload from '@/util/upload';
import Upload from '@/components/upload/Upload';

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

文章来源:https://blog.csdn.net/m0_64715294/article/details/135196836
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。