小程序圖片上傳
htmlcss
<view class='title'>
<view class='title-left'>請留下您寶貴的建議！</view>
<view class='title-right'>
<span class='title-right-count'>{{words_count}}</span>/200</view>
</view>
<view class='content'>
<block wx:if='{{textarea_hidden == 0}}'>
<textarea class='text_class' bindinput="textarea_hidden" placeholder="請詳細描述您的問題，咱們將及時跟進解決。\n(建議添加相關問題截圖)" placeholder-style="color:rgba(153,153,153,1);" maxlength='200'/>
</block>
<block wx:else>
<view class='text_class'>{{text_data}}</view>
</block>
</view>
<view class='pic-title'>
<view class='pic-title-content'>上傳憑證
<span class='pic-title-content-right'>
(不超過
<span class='pic-title-content-right-count'>3</span>張)
</span>
</view>
</view>
<view class='pic-content'>
<view class="camera" bindtap='uploadImg'>
<image src="/img/common/camera.png" class="img">
</image>
</view>
<block wx:for="{{pics}}" wx:for-item="pic">
<image class="each-img" src='{{pic}}'>
<icon class='delete-icon' type="clear" size="40rpx" color="#999999" bindtap='delete_this' data-src="{{pic}}"/>
</image>
</block>
</view>
<view class='explain'>
<view class='explain-content'>若有緊急問題，您能夠當即聯繫
<span class='service'>農商行官方客服。</span>
</view>
</view>
<view class='sub'>
<button bindtap="submit">提交</button>
</view>
<view class="mask {{mask_show ? 'mask-show' : ''}}" catchtouchmove="doNotMove" bindtap='closePage'>
<view class='mask-content'>
<view class='title'>很是感謝！</view>
<view class='content'>咱們已經收到您的寶貴意見，咱們將迅速跟進。</view>
<image src="/img/person/thanks.png" class="thanks">
</image>
<view class='close'>
<image src="/img/common/close.png" class='close-icon'>
</image>
</view>
</view>
</view>
csshtml
.title {
margin: 20rpx;
display: flex;
position: relative;
}
.title .title-left {
font-size: 36rpx;
font-weight: bold;
color: rgba(34, 34, 34, 1);
}
.title .title-right {
position: absolute;
top: 5rpx;
right: 0rpx;
font-size: 30rpx;
font-weight: bold;
color: rgba(34, 34, 34, 1);
}
.title .title-right-count {
color: rgba(153, 153, 153, 1);
}
.content {
padding: 20rpx;
}
.content .text_class {
width: 100%;
height: 300rpx;
font-size: 26rpx;
line-height: 1.25;
z-index: -1;
color: rgba(153, 153, 153, 1);
position: static;
}
.pic-title {
margin: 20rpx;
font-size: 30rpx;
font-weight: 500;
color: rgba(34, 34, 34, 1);
}
.pic-title .pic-title-content-right {
color: #999;
}
.pic-title .pic-title-content-right-count {
color: #fb0000;
}
.pic-content {
margin-left: 10rpx;
margin-right: 10rpx;
display: flex;
flex-wrap: wrap;
margin-top: 60rpx;
margin-bottom: 60rpx;
}
.pic-content .camera {
width: 175rpx;
height: 175rpx;
background: rgba(255, 255, 255, 1);
border-radius: 10rpx;
position: relative;
margin-top: 20rpx;
}
.pic-content .camera .img {
width: 74rpx;
height: 54rpx;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -55%);
}
.pic-content .each-img {
overflow: visible;
margin-left: 10rpx;
width: 175rpx;
height: 175rpx;
margin-top: 20rpx;
position: relative;
}
.pic-content .each-img .delete-icon {
background-color: white;
border-radius: 50%;
position: absolute;
right: 5rpx;
top: 0rpx;
width: 38rpx;
height: 38rpx;
}
.explain {
margin: 40rpx 20rpx 20rpx 20rpx;
font-size: 24rpx;
font-weight: 500;
color: rgba(153, 153, 153, 1);
}
.explain .service {
color: #0265ff;
}
.sub {
margin-top: 80rpx;
}
.sub button {
padding: 0rpx;
width: 610rpx;
height: 100rpx;
background: rgba(2, 101, 255, 1);
border-radius: 10rpx;
color: #fff;
}
.mask {
display: none;
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 10000;
background: rgba(0, 0, 0, 0.4);
}
.mask-show {
display: block;
}
.mask .mask-content {
width: 482rpx;
height: 613rpx;
background: white;
border-radius: 10rpx;
position: absolute;
left: 50%;
top: 44.5%;
transform: translate(-50%, -55.5%);
z-index: 20000;
}
.mask-content .title {
display: block;
font-size: 38rpx;
margin-top:36rpx;
font-weight: bold;
color: rgba(51, 51, 51, 1);
text-align: center;
}
.mask-content .content {
margin-top:30rpx;
font-size: 28rpx;
font-weight: 500;
color: rgba(51, 51, 51, 1);
text-align: center;
}
.mask-content .thanks {
width: 256rpx;
height: 256rpx;
position: absolute;
left: 50%;
transform: translateX(-50%);
margin-top:50rpx;
}
.mask .close {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -126rpx;
}
.mask .close .close-icon {
width: 78rpx;
height: 78rpx;
}
jsapp
const toast = require('../../../utils/toast.js');
const util = require('../../../utils/getData.js');
const app = getApp();
Page({
/**
* 頁面的初始數據
*/
data: {
pics: [],
textarea_hidden: 0,
mask_show: 0,
text_data: "",
words_count: 0
},
doNotMove: function() {
console.log('stop user scroll it!');
return;
},
textarea_hidden: function(e) {
let text_data = e.detail.value;
let words_count = text_data.length;
let that = this;
that.setData({
text_data: text_data,
words_count: words_count
})
},
submit: function(e) {
let that = this;
// 獲取描述內容
let content = that.data.text_data;
if (content == '') {
toast.showToast('請填寫反饋內容！');
return;
}
util.getData('feedback', {
content: content,
images: JSON.stringify(that.data.pics),
openid: app.globalData.openid,
method: 'POST'
}, function(data) {
if (data.errno !== 0) {
toast.showToast(data.errdesc);
return;
}
that.setData({
textarea_hidden: 1,
mask_show: 1
})
})
},
closePage: function(e) {
wx.navigateBack();
},
uploadImg: function(e) {
let {
pics
} = this.data;
if (pics.length == 3) {
return;
}
let that = this;
wx.chooseImage({
count: 3 - pics.length,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
let tempFilePaths = res.tempFilePaths
let arr = that.uploadMutileimg({
pictures: tempFilePaths
})
}
})
},
uploadMutileimg: function(data) {
var that = this,
i = data.i ? data.i : 0,
success = data.success ? data.success : 0,
fail = data.fail ? data.fail : 0;
wx.uploadFile({
url: 'https://xxx/Upload/uploadMoreImg',
filePath: data.pictures[i],
name: 'file',
success: (res) => {
success++;
},
fail: (res) => {
fail++;
},
complete: (res) => {
i++;
var imgdata = JSON.parse(res.data);
var img = imgdata.data[0];
that.data.pics.push(img);
if (i == data.pictures.length) { //當圖片傳完時，中止調用
that.setData({
pics: that.data.pics
})
} else { //若圖片尚未傳完，則繼續調用函數
data.i = i;
data.success = success;
data.fail = fail;
that.uploadMutileimg(data);
}
}
})
},
delete_this: function(e) {
var pics = this.data.pics;
var src = e.currentTarget.dataset.src;
for (var i = 0; i < pics.length; i++) {
if (pics[i] == src) {
pics.splice(i, 1);
}
}
this.setData({
pics: pics
})
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function(options) {
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function() {
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function() {
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function() {
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function() {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動做
*/
onPullDownRefresh: function() {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function() {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function() {
}
})
太難了！！！搞了兩天。ide
相關文章
- 1. 小程序上傳圖片
- 2. 小程序---上傳圖片
- 3. 小程序上傳圖片到圖牀
- 4. 小程序公用上傳圖片js
- 5. 微信小程序 上傳圖片
- 6. 小程序上傳圖片的坑
- 7. 微信小程序上傳圖片
- 8. 小程序上傳多張圖片
- 9. 微信小程序--圖片上傳
- 10. 微信小程序圖片上傳
- 更多相關文章...
- • PHP 文件上傳 - PHP教程
- • Markdown 圖片 - Markdown 教程
- • Flink 數據傳輸及反壓詳解
- • 算法總結-歸併排序
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解決方法
- 2. Qt5.7以上調用虛擬鍵盤(支持中文)，以及源碼修改(可拖動，水平縮放)
- 3. 軟件測試面試- 購物車功能測試用例設計
- 4. ElasticSearch（概念篇）：你知道的, 爲了搜索…
- 5. redux理解
- 6. gitee創建第一個項目
- 7. 支持向量機之硬間隔（一步步推導，通俗易懂）
- 8. Mysql 異步複製延遲的原因及解決方案
- 9. 如何在運行SEPM配置嚮導時將不可認的複雜數據庫密碼改爲簡單密碼
- 10. windows系統下tftp服務器使用
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 小程序上傳圖片
- 2. 小程序---上傳圖片
- 3. 小程序上傳圖片到圖牀
- 4. 小程序公用上傳圖片js
- 5. 微信小程序 上傳圖片
- 6. 小程序上傳圖片的坑
- 7. 微信小程序上傳圖片
- 8. 小程序上傳多張圖片
- 9. 微信小程序--圖片上傳
- 10. 微信小程序圖片上傳