uniapp使用u-upload和uni.uploadFile实现上传多张图片

添加： 

列表：

编辑：

<u-upload ref="uUpload" :previewFullImage="true" :fileList="fileList"
							@on-choose-complete="onChooseComplete" height="80px" width="80px" :auto-upload="false"
							@on-remove="onRemove"></u-upload>

参数说明（可以去uview官方查看详细参数说明）：

previewFullImage： 点击可以预览图片

fileList ：显示已上传的文件列表

on-choose-complete；每次选择图片后触发，只是让外部可以得知每次选择后，内部的文件列表

auto-upload：选择完图片是否自动上传，这里我写false为了调用uni.uploadFile手动上传，如果为true自动上传，要配置action服务器参数地址

on-remove：移除图片时触发

			initFileAndImgLists() {
				// 初始化 fileList 和 imgList
                //fileList用于存储显示的图片列表
				this.fileList = this.form.acceptorImg ? this.form.acceptorImg.map(item => ({
					url: `${this.url}/photos/${item}` //可以显示图片的url，后端给地址
				})) : [];
                //imgList用于存储后端返回的图片数据
				this.imgList = Array.isArray(this.form.acceptorImg) ? this.form.acceptorImg : [];
			},	
           //因为使用了onchoosecomplete，每次选择一张图片都会触发上传，导致选第二张或者多张图片时，上传的列表会叠加。
          //这个函数的作用是将用户选择的文件（通过 lists 参数传入）添加到 this.fileList 数组中，但只有在 this.fileList 中不存在相同 url 的文件时才会添加。这样可以避免重复添加同一个文件。
           onChooseComplete(lists) {
				lists.forEach(list => {
					const fileUrl = list.url;
					// 检查文件是否已经存在
					if (!this.fileList.some(file => file.url === fileUrl)) {
						this.fileList.push({
							url: fileUrl
						});
					}
				});
			},	
         
         uploadAllFiles() {
				const uploadPromises = [];
				const files = this.fileList
                //过滤掉含有'photos'的url,初始化的时候url为含有‘photos’字符
				if (files && files.length > 0) {
					const filteredFiles = files.filter(file => !file.url.includes('photos'))
					if (filteredFiles.length > 0) {
						const filePaths = filteredFiles.map(file => file.url);
						uploadPromises.push(this.uploadFiles(filePaths));
					}
				}
            // 它将等待uploadPromises数组中的所有Promise对象完成（即所有文件上传完成）。
				return Promise.all(uploadPromises);
			},
             //这个函数的作用是批量上传文件，并处理上传结果。如果上传成功，它会将成功的结果添加到 this.imgList 数组中，并更新表单的 acceptorImg 属性
		uploadFiles(filePaths) {
             //检查传入的 filePaths 是否是一个数组。如果是，直接使用；如果不是，将其转换为一个只包含该元素的数组				
               const filePathsArray = Array.isArray(filePaths) ? filePaths : [filePaths];
				const uploadPromises = filePathsArray.map(filePath => {
					return this.uploadFile(filePath);
				});
				return Promise.all(uploadPromises)
					.then(results => {
						results.forEach(result => {
							if (result.code == 200) {
								this.imgList.push(result.data[0]);
								this.form.acceptorImg = this.imgList;
							}
						})
						return results
					})
					.catch(error => {
						console.error(error);
					});
			},
            //uni.uploadFile上传
			uploadFile(filePath) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: `${this.url}/file/filesUpload`,
						name: 'files',
						filePath: filePath,
						formData: {
							'phone': uni.getStorageSync('userInfo').phone
						},
						headers: {
							'Authorization': uni.getStorageSync('token')
						},
						success: (res) => {
							let result = JSON.parse(res.data);
							if (result.code === 200) {
								resolve(result);
							} else {
								reject(new Error('文件上传失败'));
							}
						},
						fail: (error) => {
							reject(error);
						}
					});
				});
			},
           //移除图片
         	onRemove(val) {
                let arr = this.imgList
				arr.forEach((item, index) => {
					if (val == index) {
						arr.splice(val, 1);
						this.form.imgUrl = arr
					}
				});
			},

       //可以在添加和编辑时调用，上传成功后在触发添加和编辑操作
       this.uploadAllFiles().then(()=>{
       //确认添加和编辑操作
})