uni-app 上传图片并压缩(uView)

<view class="" style="background: #fff;padding: 22upx 0;margin-top: 16upx;">
	<view class="">拍照上传(至少一张,最多三张)</view>
	<view class="">
		<view class="u-demo-area">
			<u-upload :before-remove="beforeRemove" ref="uUpload" :max-count="maxCount"
				@on-list-change="onListChange">
			</u-upload>
		</view>
	</view>
</view>
data:{ 
    maxCount: 3, //最大数量 
	arrimg: [], // 组件内部的文件列表
	isfile: -1, //判断图片是否上传完成
},



//this.$refs.uUpload.clear()//清空组件内部的文件列表(初始化)
// 打开相册
onListChange(lists) {
	// console.log('onListChange', lists);
	// this.lists = lists;
	var _self = this;
	_self.arrimg = [];
	for (var i = 0; i < lists.length; i++) {
		_self.uploadFile(lists[i].url);
	}
	setTimeout(function() {
		console.log(_self.arrimg);
	}, 1000);
},
//删除照片
beforeRemove(index, lists) {
	return true;
},
// 上传图片到阿里云OSS
uploadFile(url) {
	let tiemr = new Date();
	let address = tiemr.getFullYear() + '' + (tiemr.getMonth() + 1) + '' + tiemr.getDate();
	address = 'gld/dt/' + address + '/';
	let imageSrc = url;
	let str = imageSrc.substr(imageSrc.lastIndexOf('.'));
	let nameStr = address + tiemr.getTime() + str;
	let ossUrl = this._ossUrl;
	// console.log(imageSrc, str)
	var _self = this;
	_self.isfile = 0
	uni.showLoading({
		title: "上传中..."
	}); //数据加载中
	uni.uploadFile({
		url: ossUrl, //输入你的bucketname.endpoint
		filePath: imageSrc,
		fileType: ['image', 'video'],
		name: 'file',
		formData: {
			name: nameStr,
			key: nameStr,
			policy: this._policy, // 输入你获取的的policy
			OSSAccessKeyId: this._OSSAccessKeyId, // 输入你的AccessKeyId
			success_action_status: '200', // 让服务端返回200,不然,默认会返回204
			signature: this._signature // 输入你获取的的signature
		},
		success: res => {
			if (res.statusCode == '200') {
				console.log(ossUrl + '/' + nameStr)
				let cropFilePath = ossUrl + '/' + nameStr;
				_self.arrimg.push(cropFilePath);
				_self.isfile = -1
				uni.hideLoading(); //关闭加载
			} else {
				// console.log(res)
			}
		}
	});
},

 

猜你喜欢

转载自blog.csdn.net/weixin_44285250/article/details/119389158