在uniapp中，使用u-upload上传本地图片

前提：

首先，在关于uniapp中的input是没有type="file"这个属性的。我们我们需要去另寻他法，在这里，我们可以使用uni.chooseImage这个api去选择本地的图片，然后通过uni.uploadFile这个api去上传到相应的网址。

或者说我们使用一些组件库封装好的组件，使用其封装好的方法，就可以省去我们自己写照片预览的一些其他功能。

代码展示：

在以上代码中，我们使用了uview组件库中的form等组件（对于组件库，每个组件库之间的使用方法大致相似，可以根据官方文档进行修改），三个表单项，里面写了三个不同的照片上传， @afterRead="afterRead($event, 3)" @delete="deletePic"，这两个方法分别是新增照片的方法，以及删除照片的方法。

新增照片方法：

if (type == 1) {
				// 假设已经获取到了图片数据
				const imageData = event.file[0].url; // 这里应该是实际的图片数据
				// 创建一个Blob对象，用于存储图片数据
				const blob = new Blob([imageData], { type: 'image/png' });
				// 使用File构造函数创建一个新的File对象
				const file = new File([blob], `${event.file[0].name}`, { type: 'image/png' });
				console.log(file);
				this.companiesInfo.mtFile = file;
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let companyPicListLen = this[`companyPicList${event.name}`].length;
				lists.map((item) => {
					this[`companyPicList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					// const result = await this.uploadFilePromise(lists[i].url);
					const result = lists[i].url;
					let item = this[`companyPicList${event.name}`][companyPicListLen];
					this[`companyPicList${event.name}`].splice(
						companyPicListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						})
					);
					companyPicListLen++;
				}
			} else if (type == 2) {
				// 假设已经获取到了图片数据
				const imageData = event.file[0].url; // 这里应该是实际的图片数据
				// 创建一个Blob对象，用于存储图片数据
				const blob = new Blob([imageData], { type: 'image/png' });
				// 使用File构造函数创建一个新的File对象
				const file = new File([blob], `${event.file[0].name}`, { type: 'image/png' });
				console.log(file);
				this.companiesInfo.yYFile = file;
				console.log(this.companiesInfo.yYFile);
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let companyPicListLen = this[`companyPicList${event.name}`].length;
				lists.map((item) => {
					this[`companyPicList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					// const result = await this.uploadFilePromise(lists[i].url);
					const result = lists[i].url;
					let item = this[`companyPicList${event.name}`][companyPicListLen];
					this[`companyPicList${event.name}`].splice(
						companyPicListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						})
					);
					companyPicListLen++;
				}
			} else if (type == 3) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let companyPicListLen = this[`companyPicList${event.name}`].length;
				lists.map((item) => {
					this[`companyPicList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`companyPicList${event.name}`][companyPicListLen];
					this[`companyPicList${event.name}`].splice(
						companyPicListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						})
					);
					companyPicListLen++;
				}
			}

删除照片方法：

this[`companyPicList${event.name}`].splice(event.index, 1);

上传照片：

uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: http://www.hello.com, // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'files',
					formData: {
						files: 'test'
					},
					success: (res) => {
						setTimeout(() => {
							resolve(res.data.data);
						}, 1000);
					}
				});
			});
		},

功能实现：

三个照片选择上传表单项对应不同的字段，通过1，2，3进行判断，1，2情况下我们是直接给后端传file值，而对于3的情况，我们首先要给后端传一个file类型的值，然后后端返回一个id，我们拿到这个id在传给后端，这张照片才算是上传成功。