本人小白,干这一行时间还短,出现什么问题望大佬指正。
首先来说请求的超时时间,需要在manifest.json中进行配置项的更改。
相关链接: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>