uniapp中的uni-file-picker组件上传多张图片到服务器

由于在uniapp官方文档中的uni-file-picker组件可实现图片上传功能，默认的是上传到自带的服务，所以我们要修改成自己的服务器

**1. 添加 :auto-upload="false"**加上这个取消自动上传

复制代码

<uni-file-picker v-model="jobAddUpdateForm.imageList" :auto-upload="false"  fileMediatype="image" limit="9" :image-styles="imageStyles" @select="successData">
</uni-file-picker>

2.vue2 封装mixin （vue3 可以封装 hooks）方便后期调用

复制代码

import config from '@/config';
import {
	getToken
} from '@/utils/auth'; // 导入获取 token 的函数  

// 上传图片的异步函数  
const uploadImg = async function(tempFilePaths) {
	const baseUrl = config.baseUrl; // 基础 URL 从配置中获取  
	const token = getToken(); // 使用 getToken 函数获取 token  
	const successfulUploads = []; // 数组用于记录所有成功上传的文件路径  

	if (!tempFilePaths.length) return []; // 如果没有选择图片就退出，返回空数组  

	// 遍历选择的图片路径  
	for (const path of tempFilePaths) {
		try {
			// 调用接口上传每一张图片  
			const [err, {
				data
			}] = await uni.uploadFile({
				url: `${baseUrl}/common/upload`, // 自己的后台地址  
				filePath: path,
				name: 'file',
				header: { // 添加请求头  
					'Authorization': `Bearer ${token}`, // 假设你使用的是 Bearer 认证  
					// 可以添加其他需要的请求头  
				},
			});

			// 处理错误情况  
			if (err) {
				console.error('上传错误:', err);
				continue; // 如果上传出错，继续上传下一张图片  
			}
			  // 把返回的数据转为对象格式  
			const dataObj = JSON.parse(data); 
			console.log(dataObj)
			// 将每个上传成功的文件路径添加到数组中  
			successfulUploads.push(dataObj); // 假设 dataObj.data 是上传后的文件路径  
		} catch (error) {
			console.error('处理上传时发生错误:', error);
			continue; // 捕获上传错误并继续  
		}
	}

	// 返回所有成功上传的文件路径  
	return successfulUploads;
};

// 导出 uploadImg 函数  
export default uploadImg;

需要注意的是请求的url ,需要换成自己的接口地址

在使用的地方引入就可以了

import uploadImg from '@/mixin/imageData.js';

// 上传接口
async successData(e){
const res = await uploadImg.call(this, e.tempFilePaths)
console.log(res)
}

就可以返回上传的信息了

参考：uniapp中的uni-file-picker组件上传多张图片到服务器，可添加，预览，删除图片_uni-file-picker详细使用教学-CSDN博客