@ -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 |