在uniapp中的请求响应时间的变更及上传文件进度条

本人小白,干这一行时间还短,出现什么问题望大佬指正。

首先来说请求的超时时间,需要在manifest.json中进行配置项的更改。
相关链接:networkTimeout
这是networkTimeout的一些相关配置项
具体的使用方式:
这是具体的使用

设置完成之后重新编译一下应用。

第二个就是上传进度条,我也不知道该如何讲解,直接上代码
希望哪位大佬看到后可以给具体的解释一下
代码中包含图片 和视频的上传


<template>
	<view>
		<view class="img">
			<image :src="filePath" mode="" v-if="filePath!=''"></image>
		</view>
		<view>
			<progress :percent="percent" stroke-width="10" activeColor='#F0AD4E'></progress>
		</view>
		
		<view>
			<button type="primary" :loading="loading" :disabled="disabled" @click="upload">选择照片</button>
		</view>
		<view class="">
			<button type="primary" @tap="tijiao">上传图片</button>
		</view>
		<view>
			<video :src="filePaths" controls v-if="filePaths"></video>
		</view>
		<view>
			<button type="primary" :loading="loading" :disabled="disabled" @click="video">选择视频</button>
		</view>
		<view class="">
			<button type="primary" @tap="jiao">上传视频</button>
		</view>
	</view>

</template>
<script>
	var _self;
	export default {
		data() {
			return {
				percent: 0,
				loading: false,
				disabled: false,
				filePath:'',
				filePaths:'',
				videoWidth:0,
				videoHeight:0
			}

		},
		methods: {
			upload: function() {
				_self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						_self.filePath = res.tempFilePaths[0];
						console.log(res);
						//下面这些部分是选择好图片之后直接上传,解开注释即可。
						// const tempFilePaths = res.tempFilePaths;
						// const uploadTask = uni.uploadFile({
						// 	url:url,//请根据自己的服务器地址进行编写
						// 	filePath: tempFilePaths[0],
						// 	name: 'file',
						// 	formData: {
						// 		'userId': '349a0274345744edab3314418ba926f7'
						// 	},
						// 	success: function(uploadFileRes) {
						// 		console.log(uploadFileRes)
						// 		console.log(uploadFileRes.data);
						// 	}
						// });

						// uploadTask.onProgressUpdate(function(res) {
						// 	console.log(res);
						// 	_self.percent = res.progress;
						// 	console.log('上传进度' + res.progress);
						// 	console.log('已经上传的数据长度' + res.totalBytesSent);
						// 	console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
						// });
					},
					error: function(e) {
						console.log(e);
					}
				});
			},
			tijiao(){
				const tempFilePaths = this.filePath;
				const uploadTask = uni.uploadFile({
					url: url,//请根据自己的服务器地址进行编写
					filePath: tempFilePaths,
					name: 'file',
					formData: {
						//如果还需要其他参数,在这里配置
					},
					success: function(uploadFileRes) {
						console.log(uploadFileRes)
						console.log(uploadFileRes.data);
					}
				});
				
				uploadTask.onProgressUpdate(function(res) {
					console.log(res);
					_self.percent = res.progress;
					console.log('上传进度' + res.progress);
					console.log('已经上传的数据长度' + res.totalBytesSent);
					console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
				});
			},
			video:function(){
				_self = this;
				uni.chooseVideo({
					success(res) {
						_self.filePaths = res.tempFilePath;
						_self.videoWidth = res.width;
						_self.videoHeight = res.height;
						console.log(_self.videoWidth,_self.videoWidth)
						console.log(res);
					}
				})
			},
			jiao(){
				const tempFilePaths = this.filePaths;
				const uploadTask = uni.uploadFile({
					url:url,//请根据自己的服务器地址进行编写
					filePath: tempFilePaths,
					name: 'multipartFile',
					formData: {
						//如果还需要其他参数,在这里配置
					},
					success: function(uploadFileRes) {
						console.log(uploadFileRes)
						console.log(uploadFileRes.data);
					}
				});
				
				uploadTask.onProgressUpdate(function(res) {
					console.log(res);
					_self.percent = res.progress;
					console.log('上传进度' + res.progress);
					console.log('已经上传的数据长度' + res.totalBytesSent);
					console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
					if(res.progress == 100){
						uni.showToast({
							title:'上传完成',
							icon:'success'
						})
					}
				});
			}
		}
	}
</script>


发布了3 篇原创文章 · 获赞 4 · 访问量 206

猜你喜欢

转载自blog.csdn.net/gg0613/article/details/105141908
今日推荐