ToB企服应用市场:ToB评测及商务社交产业平台

标题: axios举行图片上传组件封装 [打印本页]

作者: 北冰洋以北 时间: 2024-6-11 12:37
标题: axios举行图片上传组件封装

媒介

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)