1. 引言
在现代的web开发中，上传文件已经成为了常见的需求。传统的文件上传方法是使用form表单提交，但是这种方式需要刷新整个页面并且不够简洁。uni-app为我们提供了一种更为简单、高效的方法来实现多图上传，本文将为大家详细介绍uni-app下的多图上传功能的实现方法。
2. 前置需求
在开始多图上传功能的实现前，我们需要先准备好一些前置条件。具体包括：
2.1 uni-app
首先需要安装uni-app开发环境，可以参考uni-app官方文档</a>进行安装和配置。
2.2 服务器
实现图片上传功能，需要有一个服务器来存储上传的图片，并返回相应的图片地址。你可以选择自己搭建服务器，也可以使用云服务商提供的存储服务。
3. 实现方法
3.1 HTML部分
首先来看一下HTML部分的代码。我们需要使用uni-app提供的uni-uploader组件，示例代码如下：
<template>
<view>
<view class="list">
<view class="list-item" v-for="(item, index) in fileList" :key="index">
<image mode="aspectFill" :src="item.path"></image>
</view>
</view>
<view class="upload">
<uni-uploader
:header="header"
:url="uploadUrl"
:file-list="fileList"
:max-count="3"
:on-success="onSuccess"
:on-error="onError"
:on-progress="onProgress"
:on-preview="onPreview"
>
<a>添加图片</a>
</uni-uploader>
</view>
</view>
</template>
为了更好的展示上传组件，我们还需要编写一些CSS样式，示例代码如下：
.list {
display: flex;
padding: 20rpx 0;
flex-wrap: wrap;
.list-item {
width: 33.33%;
box-sizing: border-box;
padding: 20rpx;
}
}
.upload {
margin-top: 40rpx;
}
.upload a {
display: block;
width: 220rpx;
height: 80rpx;
line-height: 80rpx;
border: 1rpx solid #ccc;
text-align: center;
border-radius: 6rpx;
margin: 0 auto;
}
3.2 JavaScript部分
上传的图片需要通过JavaScript代码进行处理，代码如下：
<script>
import { upoloadFile } from '@/api/upload.js'
export default {
data() {
return {
fileList: [],
header: {
'Content-Type': 'multipart/form-data'
},
uploadUrl: 'http://localhost:3000/upload'
}
},
methods: {
onSuccess(res) {
const data = JSON.parse(res.data)
this.fileList.push({
id: data.id,
path: data.url
})
console.log(this.fileList)
},
onError(err) {
console.error(err)
},
onProgress(event) {
console.log('上传进度：' + event.progress)
},
onPreview(file) {
console.log(file)
},
remove(file, index) {
console.log(file, index)
}
}
}
</script>
需要注意的是，上面的JavaScript代码中使用了一个upload.js文件进行了图片上传接口的封装。具体代码如下：
import request from '@/common/request.js'
export function upoloadFile(file) {
const formData = new FormData()
formData.append('file', file)
return request({
url: '/upload',
method: 'post',
headers: {
'Content-Type': 'multipart/form-data'
},
data: formData
})
}
这里我们使用了uni-app官方提供的网络请求库uni.request()进行了封装，将上传文件的过程进行了封装。
4. 总结
到这里，我们就完成了uni-app下的多图上传功能的实现。通过使用组件uni-uploader和网络请求库uni-request，我们可以很方便的实现多图上传的功能，同时为用户带来更好的体验。