@ -1,143 +0,0 @@ |
|||
// uploadImages/uploadImg.js
|
|||
const WXAPI = require('../../utils/config.js') |
|||
Component({ |
|||
/** |
|||
* 组件的属性列表 |
|||
*/ |
|||
properties: { |
|||
count: { //最多选择图片的张数,默认9张
|
|||
type: Number, |
|||
value: 9 |
|||
}, |
|||
uploadUrl: { //图片上传的服务器路径
|
|||
type: String, |
|||
value: '' |
|||
}, |
|||
showUrl: { //图片的拼接路径
|
|||
type: String, |
|||
value: '' |
|||
}, |
|||
albumType: { //album 从相册选图,camera 使用相机,默认二者都有
|
|||
type: String, |
|||
value: '' |
|||
}, |
|||
detailPics: { |
|||
type: Array, |
|||
value: [] |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 组件的初始数据 |
|||
*/ |
|||
data: { |
|||
detailPics: [], //上传的结果图片集合
|
|||
}, |
|||
onShow() { |
|||
console.log(1) |
|||
}, |
|||
/** |
|||
* 组件的方法列表 |
|||
*/ |
|||
methods: { |
|||
/** |
|||
* 上传详细图片 |
|||
*/ |
|||
uploadDetailImage: function (e) { //这里是选取图片的方法
|
|||
var that = this; |
|||
var pics = []; |
|||
var detailPics = that.data.detailPics; |
|||
if (detailPics.length >= that.data.count) { |
|||
wx.showToast({ |
|||
title: '最多选择' + that.data.count + '张!', |
|||
}) |
|||
return; |
|||
} |
|||
wx.chooseMedia({ |
|||
count: that.data.count, // 最多可以选择的图片张数,默认9
|
|||
sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
|
|||
sourceType: that.data.albumType == '0' ? ['camera'] : ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
|
|||
success: function (res) { |
|||
var imgs = res.tempFiles; |
|||
var ticket = wx.getStorageSync('ticket'); |
|||
var urlArr = [] |
|||
for (var i = 0; i < imgs.length; i++) { |
|||
pics.push(imgs[i]) |
|||
var url = imgs[i].tempFilePath |
|||
//取得文件的后缀
|
|||
var extensiton = url.substr(url.lastIndexOf('.') + 1).toLowerCase(); |
|||
// 根据时间戳生成唯一的主文件名称
|
|||
var mainname = '' + Date.now() + Math.ceil(Math.random() * 9999); |
|||
var uploadUrl = WXAPI.API_BASE_URL + 'Common/UploadUserFile?ticket=' + ticket + '&name=' + mainname + '.' + extensiton; |
|||
urlArr.push(uploadUrl) |
|||
} |
|||
that.uploadImg({ |
|||
url: urlArr, //这里是你图片上传的接口
|
|||
path: pics, //这里是选取的图片的地址数组
|
|||
}); |
|||
}, |
|||
}) |
|||
}, |
|||
//多张图片上传
|
|||
uploadImg: function (data) { |
|||
// console.log(this.globalData.openId)
|
|||
wx.showLoading({ |
|||
title: '上传中...', |
|||
mask: true, |
|||
}) |
|||
var that = this, |
|||
i = data.i ? data.i : 0, |
|||
success = data.success ? data.success : 0, |
|||
fail = data.fail ? data.fail : 0; |
|||
wx.uploadFile({ |
|||
url: data.url[i], |
|||
header: { 'content-type': 'multipart/form-data' }, |
|||
filePath: data.path[i].tempFilePath, |
|||
name: 'image', |
|||
formData: { "openid": '1' }, |
|||
success: (resp) => { |
|||
wx.hideLoading(); |
|||
success++; |
|||
var info = JSON.parse(resp.data);//返回的结果,可能不同项目结果不一样
|
|||
// console.log(info)
|
|||
var picName = that.data.showUrl + info.data.url; |
|||
var detailPics = that.data.detailPics; |
|||
detailPics.push(picName) |
|||
that.setData({ |
|||
detailPics: detailPics |
|||
}) |
|||
}, |
|||
fail: (res) => { |
|||
fail++; |
|||
console.log('fail:' + i + "fail:" + fail); |
|||
}, |
|||
complete: () => { |
|||
i++; |
|||
if (i == data.path.length) { //当图片传完时,停止调用
|
|||
console.log('执行完毕'); |
|||
// console.log('成功:' + success + " 失败:" + fail);
|
|||
var eventDetail = { |
|||
picsList: that.data.detailPics |
|||
} // detail对象,提供给事件监听函数
|
|||
var eventOption = {} // 触发事件的选项
|
|||
that.triggerEvent('event', eventDetail, eventOption) |
|||
} else { //若图片还没有传完,则继续调用函数
|
|||
data.i = i; |
|||
data.success = success; |
|||
data.fail = fail; |
|||
that.uploadImg(data); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
//预览图片
|
|||
imagePreview: function (e) { |
|||
console.log(e.target.dataset) |
|||
var current = e.target.dataset.src; |
|||
wx.previewImage({ |
|||
current: current, // 当前显示图片的http链接
|
|||
urls: this.data.detailPics // 需要预览的图片http链接列表
|
|||
}) |
|||
}, |
|||
} |
|||
}) |
@ -1,4 +0,0 @@ |
|||
{ |
|||
"component": true, |
|||
"usingComponents": {} |
|||
} |
@ -1,19 +0,0 @@ |
|||
<!--uploadImages/uploadImg.wxml--> |
|||
<view class='content'> |
|||
<!-- <view class='img-box'> --> |
|||
<scroll-view class='img-box' scroll-x="true"> |
|||
<view class='img-list'> |
|||
<block wx:for="{{detailPics}}" wx:key="index"> |
|||
<view class='img-item'> |
|||
<image src='{{item}}' mode="aspectFill" bindtap="imagePreview" bindlongpress="longpressImg"></image> |
|||
</view> |
|||
</block> |
|||
<view class='chooseImg' bindtap='uploadDetailImage'> |
|||
<!-- <view class="weui-uploader__input-box"></view> --> |
|||
<image class="weui-uploader__input-box" src="/images/upload.png"></image> |
|||
</view> |
|||
</view> |
|||
<!-- <view class='tips'>长按对应的图片即可删除</view> --> |
|||
</scroll-view> |
|||
<!-- </view> --> |
|||
</view> |
@ -1,76 +0,0 @@ |
|||
/* uploadImages/uploadImg.wxss */ |
|||
page { |
|||
background-color: #f1f0f5; |
|||
} |
|||
|
|||
.content { |
|||
width: 100%; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.img-box { |
|||
width: 100%; |
|||
margin-left: 35rpx; |
|||
margin-right: 35rpx; |
|||
} |
|||
|
|||
.img-list { |
|||
display: flex; |
|||
display: -webkit-flex; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
/* flex-wrap: wrap; */ |
|||
} |
|||
|
|||
.img-item { |
|||
width: 150rpx; |
|||
text-align: left; |
|||
margin-right: 20rpx; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
|
|||
.img-item image { |
|||
width: 150rpx; |
|||
height: 150rpx; |
|||
} |
|||
|
|||
.chooseImg { |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.weui-uploader__input-box { |
|||
float: left; |
|||
position: relative; |
|||
margin-right: 9px; |
|||
margin-bottom: 9px; |
|||
width: 150rpx; |
|||
height: 150rpx; |
|||
/* border: 1px solid #d9d9d9; */ |
|||
} |
|||
|
|||
/* .weui-uploader__input-box:after, .weui-uploader__input-box:before { |
|||
content: " "; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
-webkit-transform: translate(-50%, -50%); |
|||
transform: translate(-50%, -50%); |
|||
background-color: #d9d9d9; |
|||
} */ |
|||
|
|||
.weui-uploader__input-box:before { |
|||
width: 2px; |
|||
height: 35px; |
|||
} |
|||
|
|||
.weui-uploader__input-box:after { |
|||
width: 35px; |
|||
height: 2px; |
|||
} |
|||
|
|||
.tips { |
|||
color: #666; |
|||
font-size: 25rpx; |
|||
padding-bottom: 20rpx; |
|||
} |
Before Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 6.1 KiB |
After Width: | Height: | Size: 6.9 KiB |
Before Width: | Height: | Size: 157 KiB |
After Width: | Height: | Size: 7.4 KiB |
Before Width: | Height: | Size: 162 KiB |
After Width: | Height: | Size: 7.0 KiB |
Before Width: | Height: | Size: 151 KiB |
After Width: | Height: | Size: 7.4 KiB |
Before Width: | Height: | Size: 161 KiB |
After Width: | Height: | Size: 6.9 KiB |
Before Width: | Height: | Size: 165 KiB |
After Width: | Height: | Size: 7.5 KiB |
Before Width: | Height: | Size: 149 KiB |
After Width: | Height: | Size: 8.1 KiB |
Before Width: | Height: | Size: 161 KiB |
Before Width: | Height: | Size: 29 KiB |