UNI-APP + U-VIEW上传附件方法，报错问题解决方法

浏览上传方法

import axios from '../axios.js'
//浏览器调用上传接口方法
		uploadAPPMultiFilesForH5: (params = {}) => axios({
			url: `/weight`,
			baseURL: baseUrl,
			method: 'POST',
			data: params.body,
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
				appName: params.appName ? params.appName : "ceshi",
				language: 'zh'
			}
		}),

Android手机上传方法

• UNI-APP项目
  • file: params.files[0] ，上传的file附件参数
  • name: ‘file’ 名称必填
  • filePath: params.urls[0] 必填项，此处注释会导致报错index of not a function
  • formData 需要上传的额外参数放到formData中
  • header 请求头参数
  • “Content-Type”: “multipart/form-data”,必填项
• 计划任务
• 完成任务

//安卓手机调用上传接口方法
		uploadAppMultiFiles: (params) => {
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: baseUrl+'/weight',
					method: 'POST',
					file: params.files[0],
					filePath: params.urls[0],
					name: 'file',
					formData: {
						'image_name': 'ceshi'
					},
					timeout: 5 * 60 * 1000,
					header: {
						"Content-Type": "multipart/form-data",
						appName: params.appName ? params.appName : "dips",
						factoryId: vm.$store.state.factoryId ? vm.$store.state.factoryId : 27,
						language: vm.$store.state.language ? vm.$store.state.language : 'zh',
					},
					success: (res) => {
						resolve(res)
					},
					fail: (err) => {
					//此处报错uploadFile:fail undefined，经过具体排查排除参数原因外，报错原因是服务器异常了
						this.$refs.uTips.show({type:'error',title:`服务器异常，原因：${err}`,duration:'2300'})
					}
				})
			}).then(res => {
				try {
					let data = JSON.parse(res.data)
					if (data.status == '200') { //上传成功
						params.urls.shift() //删除已上传的文件路径
						return Promise.resolve(data)
					} else { //上传失败,返回失败报文和未上传文件路径列表
						return Promise.resolve(data)
					}
				} catch (err) {
					vm.common.sysErrToast(vm, err)
				}
			})
		},

结合最终使用方法

• 使用u-upload

  • max-count:设置文件上传的最大数量
  • height 设置上传框的高度
  • width 设置上传框的宽度
  • ref ref实例为了获取到本地拍照或者相册选择上传的图片数据

• 计划任务

• 完成任务

<u-form-item label="上传图片" :border-bottom="false">
	<u-upload ref="uUpload" width="210" height="210" :auto-upload="false" max-count="1">
	</u-upload>
</u-form-item>

//根据不同的环境走不同的方法进行调用上传方法
async submitPhoto() {
				if(!this.model.carrierWeight){this.$refs.uTips.show({title:'请先输入载片重量',type:'warning'});return}
				if(this.$refs.uUpload.lists.length==0){this.$refs.uTips.show({title:'请先上传图片',type:'warning'});return}
				const params = {}
				//手机调用方法
				// #ifdef APP-PLUS
				let urls = this.$refs.uUpload.lists.map(item => item.url)
				params.urls = urls

				let res = await this.$u.api.uploadAppMultiFiles(params) //递归调用多文件上传
				if(res.status==200){
						this.$refs.uTips.show({title:'AI识图成功',type:'succcess',duration:23000});
						this.model.height==res.weight;
						this.heightDisabled=false
					}
					else if(res.status==201){
						this.$refs.uTips.show({type:'error',title:'照片清晰度不够请重新上传',duration:'2300'})
					}else{
						this.$refs.uTips.show({type:'error',title:'AI识别失败请重新上传图片',duration:'2300'})
					}
					this.$refs.uUpload.lists=[]
				// #endif
			console.log(this.$refs.uUpload.lists,'this.$refs.uUpload.lists');
				// #ifdef H5
				//浏览器调用方法
				var fd = new FormData()
				this.$refs.uUpload.lists.forEach(item => {fd.append('image', item.file),fd.append('iamge_name', 'ceshi')})
				params.body = fd
				this.$u.api.uploadAPPMultiFilesForH5(params).then(res => {
					if(res.status==200){
						this.$refs.uTips.show({title:'AI识图成功',type:'succcess',duration:23000});
						this.model.height==res.weight;
						this.heightDisabled=false
					}
					else if(res.status==201){
						this.$refs.uTips.show({type:'error',title:'照片清晰度不够请重新上传',duration:'2300'})
					}else{
						this.$refs.uTips.show({type:'error',title:'AI识别失败请重新上传图片',duration:'2300'})
					}
					this.$refs.uUpload.lists=[]
				})
				// #endif
			},