Weui-Uploader实现H5页面上传手机图片

mounted:function(){
			let t = this;
			var weuiLoading = null;
			weui.uploader('#uploader', {
			   url: this.$http.defaults.baseURL +'/upload/image/',
			   auto: true, //自动还是手动上传
			   type: 'file', //file类型，base64类型
			   fileVal: 'file', //文件上传域的name
			   compress: {
			       width: 1600,
			       height: 1600,
			       quality: 0.65
			   },
			   onBeforeQueued: function(files) {
			       // `this` 是轮询到的文件, `files` 是所有文件

			       if(["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0){
			           weui.topTips('请上传图片');
			           return false; // 阻止文件添加
			       }
			       if(this.size > 10 * 1024 * 1024){
			           weui.topTips('请上传不超过10M的图片');
			           return false;
			       }
			       if (files.length > 1) { // 防止一下子选择过多文件
			           weui.topTips('只能上传1张图片，请重新选择');
			           return false;
			       }

			       // return true; // 阻止默认行为，不插入预览图的框架
			   },
			   onQueued: function(){

					 t.imageSources = [this];
					 weuiLoading = t.$weui.loading('上传中');
			       // console.log(this.status); // 文件的状态：'ready', 'progress', 'success', 'fail'
			       // console.log(this.base64); // 如果是base64上传，file.base64可以获得文件的base64
			       // this.upload(); // 如果是手动上传，这里可以通过调用upload来实现；也可以用它来实现重传。
			       // this.stop(); // 中断上传
			       // return true; // 阻止默认行为，不显示预览图的图像
			   },
			   onBeforeSend: function(data, headers){
				   console.log("上传onBeforeSend");
			       console.log(this, data);
				   t.imageSources = [this];

			       // $.extend(data, { name: "file"}); // 可以扩展此对象来控制上传参数
			       // $.extend(headers, {'Content-Disposition': 'form-data; name=file;filename='+this.name,'Content-Type':this.type}); // 可以扩展此对象来控制上传头部
					// $.extend(headers, {'file':this});
			       // return false; // 阻止文件上传
			   },
			   onProgress: function(procent){
				   t.imageSources = [this];
			       // return true; // 阻止默认行为，不使用默认的进度显示
			   },
			   onSuccess: function (ret) {
				   weuiLoading.hide();
				   console.log("上传成功");
				   t.imageSources = [this];
				   console.log(this.status);
			       console.log(this, ret);
				   if(ret.status == 1){
					    t.liveCoverUrl = ret.data.url;
				   }
			       // return true; // 阻止默认行为，不使用默认的成功态
			   },
			   onError: function(err){
				   weuiLoading.hide();
				   console.log("上传失败");
				   t.imageSources = [this];
				   console.log(this.status);
			       // return true; // 阻止默认行为，不使用默认的失败态
			   }
			});
		},

   //提交数据的时候，将Date类型转成long类型
let begninTime = moment(this.beginDatetime).valueOf();
let endTime = moment(this.endDatetime).valueOf();

   //数据解析的时候，将long类型转成日期类型
   let pageVue = this;
   if(liveRoom.begin > 0){
       pageVue.beginDatetime = moment(liveRoom.begin).format();
   }
   if(liveRoom.end > 0){
       pageVue.endDatetime = moment(liveRoom.end).format();
   }

lastMonthData: function() {
	const end = new Date()
	const start = new Date()
	start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
	this.beginDateStr = moment(start.getTime()).format('YYYY-MM-DD');
	this.endDateStr = moment(end.getTime()).format('YYYY-MM-DD');
},

//显示开始时间
showStartDatePickerAction: function() {
	//weUI 显示日期控件
	let that = this;
	this.$weui.datePicker({
		end: that.endDateStr,
		cron: '* * *',
		defaultValue: that.beginDateStr.split("-"),
		onChange: function(result) {
			var dateArr = Array();
			for (var i = 0; i < result.length; i++) {
				let item = result[i];
				let valueStr = '' + item.value;
				if (i > 0 && valueStr.length == 1) {
					valueStr = '0' + valueStr;
				}
				dateArr.push(valueStr);
			}
			that.beginDateStr = dateArr.join("-");
		},
		onConfirm: function(result) {

			var dateArr = Array();
			for (var i = 0; i < result.length; i++) {
				let item = result[i];
				let valueStr = '' + item.value;
				if (i > 0 && valueStr.length == 1) {
					valueStr = '0' + valueStr;
				}
				dateArr.push(valueStr);
			}
			that.beginDateStr = dateArr.join("-");
		},
		id: 'startDatePicker',
		title: '选择开始日期'
	});
},

//显示结束时间
showEndDatePickerAction: function(e) {
	//weUI 显示日期控件
	let that = this;
	this.$weui.datePicker({
		start: that.beginDateStr,
		end: new Date(),
		cron: '* * *',
		defaultValue: that.endDateStr.split("-"),
		onChange: function(result) {
			var dateArr = Array();
			for (var i = 0; i < result.length; i++) {
				let item = result[i];
				let valueStr = '' + item.value;
				if (i > 0 && valueStr.length == 1) {
					valueStr = '0' + valueStr;
				}
				dateArr.push(valueStr);
			}
			that.endDateStr = dateArr.join("-");
		},
		onConfirm: function(result) {

			var dateArr = Array();
			for (var i = 0; i < result.length; i++) {
				let item = result[i];
				let valueStr = '' + item.value;
				if (i > 0 && valueStr.length == 1) {
					valueStr = '0' + valueStr;
				}
				dateArr.push(valueStr);
			}
			that.endDateStr = dateArr.join("-");
		},
		id: 'endDatePicker',
		title: '选择结束日期'
	});
},

//自定义时间段
showComonPickerAction: function() {
	var typesArr = ['近一周', '近一月', '近一年'];
	var dataArr = Array();
	typesArr.forEach(function(value, index) {
		dataArr.push({
			label: value,
			value: index
		});
	});

	let that = this;
	this.$weui.picker(dataArr, {
		defaultValue: [1],
		className: 'custom-picker-item',
		container: 'body',
		onChange: function(result) {},
		onConfirm: function(result) {
			if (result.length) {
				that.ticketItem = result[0];

				if (that.ticketItem.value == 0) {
					const end = new Date();
					const start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
					that.beginDateStr = moment(start.getTime()).format('YYYY-MM-DD');
					that.endDateStr = moment(end.getTime()).format('YYYY-MM-DD');
				} else if (that.ticketItem.value == 1) {
					that.lastMonthData();
				} else {
					const end = new Date()
					const start = new Date()
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
					that.beginDateStr = moment(start.getTime()).format('YYYY-MM-DD');
					that.endDateStr = moment(end.getTime()).format('YYYY-MM-DD');
				}
			}
		},
		id: 'picker',
		title: '时间段筛选'
	});
}

mounted: function() {
    // 添加滚动事件，检测滚动到页面底部
    window.addEventListener('scroll', this.scrollBottom);
},
methods: {

    scrollBottom(event) {

        let scrollTop = document.body.scrollTop;

        // 滚动到页面底部时 && 请求加载已完成 && 还有下一页的数据；
        if ((((window.screen.height + scrollTop) >= (document.body.scrollHeight)) && this.requestLoadingFinished &&
                this.hasMoreDataFlag)) {
            this.requestLoadingFinished = false;
            this.pageNumber++;

            this.loadCustomerDataRequest();
        }
    },
}