<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)
}
}
});
},
<view class="" style="background: #fff;padding: 2
阅读背景：
uni-app 上传图片并压缩（uView)
来源：互联网
分享到：
