写真をアップロードするために同様のマイクロチャネルクライアントの生産は、アプレットに備えています。
機能：あなたは画像の別々のアップロードすることができ
、複数のアップロード：機能TWO
機能3：クリック可能な画像を削除します
wxml：
<view class='photo'>
<view class='title'>
图片
</view>
<view class='up-pic'>
<view class='flex pic-box'>
<block wx:key="imgbox" wx:for="{{imgbox}}">
<view class='ap-box'>
<view class='add-pic'>
<image class='add-pic' src='{{item}}' bindtap="previewImage" data-index='{{index}}'></image>
<view class='img-de' data-deindex='{{index}}' bindtap='imgDelete1'>
<image class='img' src='../../../assets/images/remove.png'></image>
</view>
</view>
</view>
</block>
<view class='add-pic' bindtap='addPic1' wx:if="{{imgbox.length<9}}">
<image class='img' src='../../../assets/images/addPhoto.png'></image>
</view>
</view>
</view>
</view>
wxss：
/* 上传图片部分 */
.photo {display: flex;flex-direction: column;justify-content:center;align-items: flex-start;padding: 0 31.2rpx;border-bottom:1px solid #e7e7e7;padding-bottom:23.4rpx;}
.photo .title {margin-top:31.2rpx;}
.flex{display:flex;}
.up-pic{display:flex;justify-content:flex-start;align-items:center;}
.pic-box{flex-flow:wrap;}
.ap-box{position:relative;}
.add-pic{width:124.8rpx;height:124.8rpx;margin-right:45rpx;margin-bottom:23.4rpx;position:relative;}
.add-pic image {width:124.8rpx;height:124.8rpx;margin-top:10rpx;}
/* 删除图片 */
.img-de{width:40rpx;height:40rpx;border-radius:50%;position:absolute;right:-10rpx;top:-10rpx;}
.img-de image {width:40rpx;height:40rpx;}
写真を選択し使用して、画像のアップロード機能をクリックwx.chooseImage()し、アップロードをwx.uploadFile()：
// 上传图片 &&&
addPic1: function (e) {
var imgbox = this.data.imgbox;
var that = this;
var n = 9;
var urlList = []
if (9 > imgbox.length > 0) {
n = 9 - imgbox.length;
} else if (imgbox.length == 9) {
n = 1;
}
wx.chooseImage({
count: n, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
console.log(res)
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
if (9 > imgbox.length) {
if (imgbox.length == 0) {
imgbox = tempFilePaths
} else {
imgbox = imgbox.concat(tempFilePaths);
}
wx.showLoading({ // 添加loading状态
title: '上传中',
})
if (res.tempFilePaths.length !== 1) {
for (var i = 0; i < res.tempFilePaths.length; i++) {
wx.uploadFile({
url: 'xxx', // 接口地址
filePath: res.tempFilePaths[i], // 上传文件的临时路径
name: 'file',
formData: { // 上传路径等参数
type: 0,
project: "aaa", // 项目名称
path: "bbb" // 项目路径文件夹
},
success(res) {
// 采用选择几张就直接上传几张，最后拼接返回的url
wx.hideLoading()
var obj = JSON.parse(res.data)
var more = []
more.push(obj.url)
var tem = that.data.imageUrl
that.setData({
imageUrl: tem.concat(more)
})
}
})
}
} else {
wx.uploadFile({
url: 'https://image.tyunfarm.com/Project/SaveProjectImage',
filePath: res.tempFilePaths[0],
name: 'file',
formData: {
type: 0,
project: "bcmoa",
path: "notice"
},
success(res) {
// console.log(res)
wx.hideLoading()
var obj = JSON.parse(res.data)
urlList.push(obj.url);
var tem = that.data.imageUrl
that.setData({
imageUrl: tem.concat(urlList)
})
}
})
}
} else {
imgbox[picid] = tempFilePaths[0];
}
that.setData({
imgbox: imgbox
});
}
})
},
ここでは、一時的に、URLのファイルサーバが本当に配列を扱う画像にスプライス返さ取得するには、いくつかをアップロードするには、いくつかの選択写真を使用しました。それがアップロードされて選択します。画像内容が画像を選択した後に決定した後、一緒にアップロードされていることを言うことではありません。
一時ファイルと実際のファイルのURL URLをカット写真を削除します。
// 删除照片 &&
imgDelete1: function (e) {
let that = this;
let index = e.currentTarget.dataset.deindex;
let imgbox = this.data.imgbox;
let imageUrl = this.data.imageUrl;
imgbox.splice(index, 1)
imageUrl.splice(index, 1)
that.setData({
imgbox: imgbox,
imageUrl: imageUrl
});
},
ときにサーバーに送信されるデータの最終提出は、実際の画像のURLアドレスです。
画像のプレビュー全体像、使用wx.previewImage()：
// 点击预览大图
previewImage(e) {
var current = this.data.imgbox[e.target.dataset.index]
wx.previewImage({
current: current, // 当前显示图片的http链接
urls: this.data.imgbox // 需要预览的图片http链接列表
})
},
ます。https：//www.jianshu.com/p/dd090320abffで再現