uniapp微信小程序需要一个文档打印功能，将微信聊天内容里面的文档上传到服务器中。将实现代码记录一下。
<template>
<view>
<u-sticky>
<view class="bgx">
<u-navbar leftIconColor="#26292C" titleStyle="color:#26292C" bgColor="#fff" :placeholder="true"
title="复印打印" :autoBack="true">
</u-navbar>
</view>
</u-sticky>
<div class="list2">
<div class="listTitle">
服务标准
</div>
<div class="listItem">
<div class="listIteml">
黑白打印
</div>
<div class="listItemr">
{{data.bw_currency}}
</div>
</div>
<div class="listItem">
<div class="listIteml">
彩色打印
</div>
<div class="listItemr">
{{data.color_currency}}
</div>
</div>
</div>
<div class="list2">
<div class="listTitle">
黑白打印
</div>
<div class="upload" @click="chooseImage">
<text>+</text>
</div>
<div class="listItem" v-for="(item,index) in list" :key="index">
<div class="listIteml">
{{item.file_originalname}}
</div>
<div class="listItemr" @click="deleteItem(index)">
删除
</div>
</div>
</div>
<div class="list2 pb30">
<div class="listTitle">
彩色打印
</div>
<div class="upload" @click="chooseImage2">
<text>+</text>
</div>
<div class="listItem" v-for="(item,index) in list_color" :key="index">
<div class="listIteml">
{{item.file_originalname}}
</div>
<div class="listItemr" @click="deleteItemColor(index)">
删除
</div>
</div>
</div>
<u-gap height="80" bgColor="rgba(0,0,0,0)" marginTop="10" marginBottom="10"></u-gap>
<div class="footer">
<div class="payPrice">待支付：
<!-- <div class="n1">¥</div> -->
<div class="n2">{{currency}}</div>积分
</div>
<div class="paybut" @click="dayinexchange">立即兑换</div>
</div>
</view>
</template>
<script>
import {
dayin,
dayinexchange,
bw_upload,
color_upload,
} from '@/config/api.js'
import configs from '@/config/config.js'
export default {
components: {},
data() {
return {
data: {
bw_currency: "",
color_currency: ""
},
list: [],
list_color: [],
}
},
mounted() {
this.dayin()
},
onShow() {
},
computed: {
currency: function() {
var currency = 0
this.list.forEach((type) => {
currency = type.currency + currency
});
this.list_color.forEach((type) => {
currency = type.currency + currency
});
return currency
},
bw_files: function() {
var file = []
this.list.forEach((type) => {
file.push(type.file_path)
});
return file.join(",")
},
color_files: function() {
var color_files = []
this.list_color.forEach((type) => {
color_files.push(type.file_path)
});
return color_files.join(",")
},
},
methods: {
deleteItem(index) {
var that = this;
uni.showModal({
title: '确定要删除吗?',
content: ' ',
success: function(res) {
if (res.confirm) {
that.list.splice(index, 1)
}
}
});
},
deleteItemColor(index) {
var that = this;
uni.showModal({
title: '确定要删除吗?',
content: ' ',
success: function(res) {
if (res.confirm) {
that.list_color.splice(index, 1)
}
}
});
},
chooseImage() {
var that = this;
uni.chooseMessageFile({
count: 9,
type: 'file',
success: res => {
console.log(res)
this.updatabw(res.tempFiles)
},
fail: err => {
}
});
},
chooseImage2() {
var that = this;
uni.chooseMessageFile({
count: 9,
type: 'file',
success: res => {
this.updataColor(res.tempFiles)
},
fail: err => {
}
});
},
async updatabw(data) {
var that = this;
// that.updatabw(res.tempFilePaths)
for (let i = 0; i < data.length; i++) {
console.log(data[i])
console.log(222)
const result = await new Promise((resolve, reject) => {
uni.showLoading({
title: '上传中',
mask: true
})
let a = uni.uploadFile({
url: configs.bw_upload, // 仅为示例，非真实的接口地址
filePath: data[i].path,
name: 'file',
header: {
// Authorization: 'Bearer ' + uni.getStorageSync('token')
},
success: (res) => {
console.log(res)
uni.hideLoading()
setTimeout(() => {
resolve(JSON.parse(res.data))
}, 100)
},
fail: (res) => {
uni.hideLoading()
if (res.code == 401) {
uni.redirectTo({
url: '/pages/login/login'
})
}
}
});
})
console.log(result)
that.list.push(result.data)
}
},
async updataColor(data) {
var that = this;
// that.updatabw(res.tempFilePaths)
for (let i = 0; i < data.length; i++) {
const result = await new Promise((resolve, reject) => {
uni.showLoading({
title: '上传中',
mask: true
})
let a = uni.uploadFile({
url: configs.color_upload, // 仅为示例，非真实的接口地址
filePath: data[i].path,
name: 'file',
header: {
// Authorization: 'Bearer ' + uni.getStorageSync('token')
},
success: (res) => {
console.log(res)
uni.hideLoading()
setTimeout(() => {
resolve(JSON.parse(res.data))
}, 100)
},
fail: (res) => {
uni.hideLoading()
if (res.code == 401) {
uni.redirectTo({
url: '/pages/login/login'
})
}
}
});
})
console.log(result)
that.list_color.push(result.data)
}
},
dayinexchange() {
var that = this;
dayinexchange({
bw_files: this.bw_files,
color_files: this.color_files,
currency: this.currency,
}, {
params: {
},
custom: {
auth: true
}
}).then(res => {
console.log(res)
if (res.result) {
uni.showToast({
title: res.tip,
icon: 'none'
})
this.list = []
this.list_color = []
}
}).catch(err => {
})
},
// 首页
dayin() {
var that = this;
dayin().then(res => {
if (res.result) {
this.data = res.data
}
}).catch(err => {
})
},
}
}
</script>
<style>
page {
background: #f9f9f9;
}
</style>
<style scoped lang="scss">
.support {
width: 690rpx;
height: 90rpx;
background-image: linear-gradient(179deg, #F87464 1%, #EF4034 100%);
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
font-family: PingFangSC-Medium;
font-size: 32rpx;
color: #FFFFFF;
font-weight: 500;
margin: 0 auto;
}
.list2 {
width: 690rpx;
background: #FFFFFF;
margin: 0 auto;
border-radius: 20rpx;
margin-top: 38rpx;
margin-bottom: 50rpx;
.listTitle {
font-family: PingFangSC-Medium;
font-size: 32rpx;
color: #333333;
font-weight: 500;
margin-left: 30rpx;
height: 100rpx;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
}
.listItem {
width: 630rpx;
height: 80rpx;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
margin: 0 auto;
.listIteml {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
font-family: PingFangSC-Regular;
font-size: 24rpx;
color: #333333;
font-weight: 400;
width: 300rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.listItemr {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
font-family: PingFangSC-Regular;
font-size: 24rpx;
color: #333333;
font-weight: 400;
}
}
}
.upload {
background: url(https://images.wanjunshijie.com/mini/yujian/static/uploadbg.png) no-repeat;
width: 630rpx;
margin: 0 auto;
height: 100rpx;
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
text {
font-family: PingFangSC-Medium;
font-size: 50rpx;
color: #F35749;
font-weight: 500;
}
}
.pb30 {
padding-bottom: 30rpx;
}
.footer {
width: 750rpx;
height: 145rpx;
display: flex;
justify-content: flex-end;
align-items: flex-start;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
position: fixed;
padding-top: 15rpx;
bottom: 0;
left: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
background: #fff;
.payPrice {
font-family: SourceHanSansSCVF-Regular;
font-size: 32rpx;
color: #333333;
text-align: center;
font-weight: 400;
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.n1 {
font-family: PingFangSC-Medium;
font-size: 24rpx;
color: #EF4034;
text-align: center;
font-weight: 500;
margin-right: 5rpx;
}
.n2 {
font-family: PingFangSC-Medium;
font-size: 36rpx;
color: #EF4034;
font-weight: 500;
}
}
.paybut {
width: 180rpx;
height: 65rpx;
background-image: linear-gradient(179deg, #F87464 1%, #EF4034 100%);
border-radius: 9rpx;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
font-family: PingFangSC-Medium;
font-size: 32rpx;
color: #FFFFFF;
font-weight: 500;
margin-right: 30rpx;
margin-left: 54rpx;
}
}
</style>
