前端 vue + vant 实现文件上传

前言

文件上传是一个普遍存在的需求，今天就来看看前端上传文件怎么实现

后端接收前端上传的文件可以进入传送门：前端 vue + vant - 后端 java - 阿里云OSS存储 实现文件上传-CSDN博客

接下来就上正菜了！

介绍

前端上传文件一般都是通过 FormData 来实现的，FormData 对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据 （keyed data），而独立于表单使用。也可以单独用于文件上传，只要遵循使用规范就可以。

链接： FormData - Web APIs | MDN

FormData 的基本使用

1. 创建一个实例

const formData = new FormData()

2.  新增键值对

formData.append('file', userAvatar.file)

3. 删除某个键值对

formData.delete(name) // name 是要删除的键

4. 获取一个迭代器，这个迭代器中包含所有键值对

formData.entries()

5. 获取某个键值对

formData.get（name） // name 是希望获取的键

6. 获取某个键关联的所有值

formData.getAll(name) // name 是希望返回的键

7. 为对象中的现有键设置一个新值，或者添加键/值（如果该键/值尚不存在）

formData.set(name, value) //name ：键，value: 值

实操

首先前端我这里使用的是vue3 加 vant组件库 中的 uploader 组件 实现文件上传，用户点击头像时会弹出一个头像选择框，弹出框中包裹着一个文件上传组件，然后用户对应的地方可以选择自己希望上传的头像，贴出代码：

js代码：

1. // pinia状态管理，用于存储记录用户状态，你可以换成你自己使用的
2. // 状态管理
3. import { useUserStore } from '../../stores/modules/user'
4. const userStore = useUserStore()
5. // 控制弹出层的显示
6. const show = ref(false)
7. // 用户点击自己的头像后，可以选择自己需要修改的头像，
8. // 以下回调函数，入参是选择图片（文件），可以对其执行相关操作
9. // 然后上传到后端，后端会返回一个图片地址，把这个图片地址更新到用户信息中
10. const afterRead = async (userAvatar) => {
11. // eslint-disable-next-line no-undef
12. // 通过formData来封装文件，然后发送给后端
13. const formData = new FormData()
14. formData.append('file', userAvatar.file)
15. // eslint-disable-next-line no-undef
16. // 通过自己封装的方法向后端发送请求
17. const res = await userUpdateAvatarService(formData)
18. if (res.data.code === 0) {
19. show.value = false
20. userStore.setCurrentUser(res.data.data)
21. }
22. }
24. // 更新头像
25. // 注意一定要配置请求头
26. const userUpdateAvatarService = (formData) =>
27. // request 是自己封装的axios，可以自行封装，也可以直接使用axios发送请求
28. request.post('/user/handleUpdataAvatar', formData, {
29. headers: {
30. 'Content-Type': 'multipart/form-data'
31. }
32. })

代码中已经给出了注释，可以边看代码边看注释 ，需要强调的是：上传formdata格式文件一定要设置请求头为：multipart/form-data

html代码：

1. <van-cell title="头像" is-link>
2. <template
3. v-if="userStore.currentUser && userStore.currentUser.userAvatar"
4. >
5. <van-image
6. width="100"
7. height="100"
8. :src="userStore.currentUser.userAvatar"
9. fit="cover"
10. @click="show = true"
11. />
12. template>
14. <template v-else>
15. <van-icon name="camera-o" size="2rem" />
16. template>
18. <van-popup v-model:show="show" :style="{ padding: '64px' }">
19. <van-uploader
20. ref="uploader"
21. :after-read="afterRead"
22. show-upload="false"
23. />
24. <p>请选择自己的头像p>
25. van-popup>
26. van-cell>

uploader组件中的 show-upload 属性可以设置是否显示上传区域，这里我设置为false，因为这里我是给图片添加了点击事件，点击图片弹出弹窗，在弹窗中可以选择图片。

效果

点击头像：

显示弹出框：

 

 点击弹出框中间区域选择头像：

选好头像后，点击确定，头像经后端接收上传至服务器，然后返回图片url地址，前端可以展示：

 想看后端如何接收文件的，可以进入传送门：前端 vue + vant - 后端 java - 阿里云OSS存储 实现文件上传-CSDN博客k

扩展 

如果希望以表单的形式上传文件，同时需要提交很多个字段的信息，比如用户名字，用户联系方式等，只需要在formData中以append方法追加键值对即可，后端如何接收呢？放心进入上面的传送门有详细解答，首先来看前端如何传：

1. //将表单信息添加到formdata中然后发送给后端
2. FormData formdata = new FormData()
3. formData.append('roleName', roleCreateParams.value.roleName)
4. formData.append('roleNickName', roleCreateParams.value.roleNickName)
5. formData.append('roleProfile', roleCreateParams.value.roleProfile)
6. formData.append('tags', roleCreateParams.value.tags)
7. const res = await roleCreateService(formData)

上述代码只需要放在你自己的前端代码中提交表单数据的事件即可。

建议看完这篇文章可以去看看后端如何接收文件！

好了，前端如何上传文件，就到这里，如果有什么技术问题，欢迎一起交流！