<template>
<view class="upload-compon">
<view v-for="(photo, index) in photoData" :key="index" class="loop-img-box">
<image class="img-list" :src="photo" @tap="previewPhoto(photoData, index)" mode="aspectFill"></image>
<!-- <view v-if="num > 0" class="q-image-remover" :data-idx="index" @click="btnDeleteImg(index)">
<image class="delete-img" src="@/static/delete_1.jpg" mode="aspectFill"></image>
</view> -->
</view>
<image class="img-list" @tap="chooth(num)" :src="src" mode="aspectFill"
v-if="photoData.length < num"></image>
<canvas :style="styleObj" type="2d" :id="canvasId"></canvas>
<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
<view>
<uni-row>
<uni-col span="24">
<view style="display:grid;place-items: center;">
<view class="btn-view" @click="takephoto()">
拍摄照片
</view>
</view>
<view style="margin-top:-90rpx;display:grid;place-items: center;">
<view class="btn-view" @click="uploadfile()">
上传文件
</view>
</view>
</uni-col>
</uni-row>
</view>
</uni-popup>
<!-- <uni-popup ref="camera" type="bottom">
<view v-if="cameraflag">
<uni-row>
<uni-col :span = "24">
<view :style="screenHeight">
<camera device-position="back" flash="off" binderror="error" style="z-index:800;width: 100%; height: 90%;">
</camera>
<cover-view style="z-index: 99999;">
<cover-image src="@/static/ocr/cam.png"></cover-image>
</cover-view>
</view>
</uni-col>
</uni-row>
</view>
</uni-popup> -->
</view>
</template>
<script>
import { mapState } from 'vuex'
import req from '@/utils/request.js'
export default {
data() {
return {
flagC: false,
photoData: this.photoList,
photoArray: [],
// photoArray: [],
// canvasWidth: '',
// canvasHeight: '',
sWidth: '',
sHeight: '',
photoIndex: 0,
scId: this.scList,
Arr: [],
imgList: [],
// src1:this.src
scr: '@/static/tianjiazhaopian.png',
styleObj: {
width: '0px',
height: '0px'
},
cameraflag:false,
mbsrc:'',
sfzmbz:'/static/ocr/sfzmbz.png',
sfzmbf:'/static/ocr/sfzmbf.png',
allmb:'/static/ocr/allmb.png',
screenHeight:''
}
},
mounted(){
},
props: ['num', 'typeimg', 'photoList', 'scList', 'src', 'flag', 'canvasId', 'state'],
onShow() {
},
onLoad() {
},
computed: {
...mapState('m_user', ['hyxx'])
},
methods: {
chooth() {
const windowInfo = wx.getWindowInfo()
this.screenHeight = 'height:' + windowInfo.windowHeight + 'px;+weight:' + windowInfo.windowWidth + 'px'
this.$refs.popup.open('bottom')
},
takephoto(){
if(this.typeimg == 'sfzz'){
this.mbsrc = this.sfzmbz
}
else if(this.typeimg == 'sfzf'){
this.mbsrc = this.sfzmbf
}else {
this.mbsrc = this.allmb
}
this.cameraflag = true
uni.navigateTo({
url:'/pagesFen/ocrCamera/camera-ocr?typeimg=' + this.typeimg
})
this.$refs.popup.close()
},
cancleimg(){
this.cameraflag = false
this.$refs.camera.close()
},
takeimg(ocrsrc) {
let inter = setInterval(() => {
uni.showLoading({
title: '上传中...',
mask: true
})
this.setimg(ocrsrc, 1)
clearInterval(inter)
uni.hideLoading()
}, 700)
},
uploadfile(){
this.$refs.popup.close()
this.Arr = []
var number = this.num - this.photoData.length
var my = this
var array = []
my.photoArray = []
my.File = []
uni.chooseImage({
count: number, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'],
success:(res)=> {
//图片数组
console.log(res);
let tempFilePath = res.tempFilePaths
let num1 = 0
let inter = setInterval(() => {
uni.showLoading({
title: '上传中...',
mask: true
})
console.log("start"+num1+" "+res)
my.setimg(tempFilePath[num1], res.tempFilePaths.length)
// console.log(num1);
// console.log(res.tempFilePaths.length);
num1++
console.log("end"+this.num1+" "+tempFilePath.length)
if (num1 == tempFilePath.length) {
// console.log('111');
num1 = 0
clearInterval(inter)
return
}
uni.hideLoading()
}, 700)
}
})
},
//图片上传
tpsc(tps) {
console.log('图片上传方法tps===', tps)
var url = req.HttpHost + '/portal.php?resid=fileUpload.uploader'
var sc = new Array(tps.length)
this.digui(0, tps, url, sc)
},
//异步递归
digui(index, arr, url, sc) {
//console.log(index,arr.length)
if (index == arr.length) {
uni.hideLoading()
// console.log(this.scId);
// console.log(this.typeimg);
this.$emit('tijiaoImg', this.scId, this.typeimg)
return
}
var my = this
//console.log('上传图片filePath===',arr[index])
var uploadTask = uni.uploadFile({
url: url,
filePath: arr[index],
name: 'file',
header:{
'Content-Type':'multipart/form-data'
},
success: (uploadFileRes) => {
var res = JSON.parse(uploadFileRes.data)
sc[index] = res.data.id
if (index == arr.length - 1) {
// my.scId = sc
// console.log(sc);
sc.forEach((item) => {
my.scId.push(item)
})
}
index++
// console.log(index);
my.digui(index, arr, url, sc)
},
fail: (res) => {
// console.log(res)
}
});
uploadTask.onProgressUpdate((res)=>{
console.log('上传进度' + res.progress)
})
},
setimg(tempFilePath, num) {
let that = this
that.imgList = []
// that.Arr = []
uni.getSystemInfo({
//获取设备信息
success: (info) => {
uni.getImageInfo({
//获取图片信息
src: tempFilePath,
success: (res) => {
//设备宽
console.log('获取图片信息成功res===', res)
const sWidth = info.windowWidth || 375
//按图片长宽比，算出高度
let sHeight = sWidth / (res.width / res.height)
// let sHeight = res.height
sHeight = Number(sHeight.toFixed(0))
//赋值给canvas
that.sWidth = sWidth
that.sHeight = sHeight
that.styleObj = {
width: sWidth + 'px',
height: sHeight + 'px'
}
//初始化画布
console.log("0000")
that.createSelectorQuery()
.select(`#${that.canvasId}`) // 在 WXML 中填入的 id
.fields({
node: true,
size: true
})
.exec((canvasRes) => {
console.log("1111")
// Canvas 对象
const canvas = canvasRes[0].node
// Canvas 画布的实际绘制宽高
const renderWidth = canvasRes[0].width
const renderHeight = canvasRes[0].height
// Canvas 绘制上下文
const ctx = canvas.getContext('2d')
// 初始化画布大小
//const dpr = wx.getWindowInfo().pixelRatio
// canvas.width = renderWidth * dpr
canvas.width = sWidth
// canvas.height = renderHeight * dpr
canvas.height = sHeight
// ctx.scale(dpr, dpr)
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.font = 'normal bold 15px Source Han Sans CN'
console.log("222")
const image = canvas.createImage()
console.log('245 res.path===', res.path)
image.src = res.path
image.onload = () => {
ctx.drawImage(image, 0, 0, canvas.width, canvas
.height)
if (res.width < 700) {
ctx.font = '30px'
} else if (res.width < 300) {
ctx.font = '5px'
} else {
ctx.font = '40px'
}
//处理图片
ctx.rotate((45 * Math.PI) / 180)
ctx.rotate((-45 * Math.PI) / 180)
// 生成图片
wx.canvasToTempFilePath({
canvas,
success: (ret) => {
// 生成的图片临时文件路径
console.log('canvas转path成功', ret.tempFilePath)
that.Arr.push(ret.tempFilePath)
console.log('添加图片')
if (num == that.Arr.length) {
// console.log('添加图片');
let Arr1 = []
for (var i = 0; i < that.Arr.length; i++) {
that.photoData.push(that.Arr[i])
Arr1.push(that.Arr[i])
}
this.tpsc(Arr1)
}
}
})
}
})
}
})
}
})
},
// 预览图片
previewPhoto(arr, index) {
uni.previewImage({
current: index, //预览图片的下标
urls: arr //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
// loop:true,
})
// this.$forceUpdate()this
},
// 删除照片
btnDeleteImg(index) {
// console.log(this.scId);
var my = this
my.photoData.splice(index, 1)
//my.photoData = my.photoData.filter(item => item !== index);
my.Arr.splice(index, 1)
// console.log(my.photoData);
my.$set(my.photoData)
my.scId.splice(index, 1)
my.$set(my.scId)
// my.$forceUpdate()
//my.$emit('tijiaoImg', my.scId, my.typeimg)
}
}
}
</script>
<style lang="scss">
.upload-compon {
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-wrap: wrap;
}
.loop-img-box {
// width: 100rpx;
// height: 64rpx;
position: relative;
// margin-left: 24rpx;
// margin-bottom: 16rpx;
}
uni-view {
display: inline-block !important;
}
.preview-loop-pic {
width: 100rpx;
height: 64rpx;
}
.img-list {
position: relative;
padding: 15rpx;
width: 450rpx !important;
height: 295rpx !important;
/* vertical-align: bottom; */
}
.add-gray-img {
width: 48rpx;
height: 48rpx;
}
.q-image-remover {
width: 48rpx;
height: 48rpx;
}
.delete-img {
width: 48rpx;
height: 48rpx;
position: absolute;
top: -4rpx;
right: -4rpx;
// padding: 10rpx;
}
.img {
width: 140rpx;
height: 110rpx;
padding: 15rpx;
}
/* .content {
padding: 20upx;
} */
canvas {
border: solid 1px gray;
position: absolute;
left: 5000upx;
}
.btn-view {
width: 694rpx;
height: 90rpx;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
font-size: 32rpx;
font-weight: 700;
background-color: #00CD9F;
border-radius: 12rpx;
margin-top: 80rpx;
margin-bottom: 48rpx;
}
.card{
z-index: 999;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 510rpx;
height: 740rpx;
}
.btn-cam {
width: 100rpx;
height: 100rpx;
margin-top: 16rpx;
}
.btn-cam-cancle {
width: 80rpx;
height: 80rpx;
position: absolute;
z-index: 999;
top: 20rpx;
left: 20rpx;
}
.camdiv{
background-color: white;
border-radius: 215px;
width: 140rpx;
height: 140rpx;
position: relative;
z-index: 999;
bottom: 70rpx;
margin: auto;
text-align: center;
}
</style>和<template>
<view class="upload-compon">
<view v-for="(photo, index) in photoData" :key="index" class="loop-img-box">
<image class="img-list" :src="photo" @tap="previewPhoto(photoData, index)" mode="aspectFill"></image>
<!-- 添加删除按钮 -->
<view class="delete-btn" @tap.stop="deletePhoto(index)">
<image class="delete-icon" src="/static/delete_1.jpg" mode="aspectFill"></image>
</view>
</view>
<image class="img-list" @tap="showUploadOptions" :src="src" mode="aspectFill" v-if="photoData.length < num"></image>
<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
<view>
<uni-row>
<uni-col span="24">
<view class="btn-container">
<view class="btn-view-item" @click="takePhoto">
拍摄照片
</view>
<view class="btn-view-item" @click="uploadFromAlbum">
上传文件
</view>
</view>
</uni-col>
</uni-row>
</view>
</uni-popup>
</view>
</template>
<script>
import { BASE_URL } from '@/http/config.js'
export default {
props: {
num: Number, // 最大照片数量
typeimg: String, // 照片类型
photoList: Array, // 已有照片列表
scList: Array, //
src: String, // 添加按钮图片
flag: Boolean,
canvasId: String,
state: String
},
data() {
return {
photoData: [...this.photoList], // 使用浅拷贝避免直接修改prop
scr: '@/static/tianjiazhaopian.png',
mbsrc: '',
sfzmbz: '/static/ocr/sfzmbz.png',
sfzmbf: '/static/ocr/sfzmbf.png',
allmb: '/static/ocr/allmb.png'
}
},
watch: {
photoList(newVal) {
this.photoData = [...newVal]
}
},
methods: {
showUploadOptions() {
this.$refs.popup.open('bottom')
},
takePhoto() {
this.setTemplateImage()
uni.navigateTo({
url: `/pagesFen/ocrcamera/camera-ocr?typeimg=${this.typeimg}`
})
this.$refs.popup.close()
},
setTemplateImage() {
switch(this.typeimg) {
case 'sfzz':
this.mbsrc = this.sfzmbz
break
case 'sfzf':
this.mbsrc = this.sfzmbf
break
default:
this.mbsrc = this.allmb
}
},
uploadFromAlbum() {
this.$refs.popup.close()
const remaining = this.num - this.photoData.length
uni.chooseImage({
count: remaining,
sourceType: ['album'],
success: res => {
this.uploadImages(res.tempFilePaths)
}
})
},
async uploadImages(imagePaths) {
uni.showLoading({ title: '上传中...', mask: true })
try {
const uploadedIds = await this.uploadToServer(imagePaths)
this.$emit('tijiaoImg', [...this.scList, ...uploadedIds], this.typeimg)
// 直接显示原始图片，不进行压缩处理
this.photoData = [...this.photoData, ...imagePaths]
} catch (error) {
console.error('上传失败:', error)
} finally {
uni.hideLoading()
}
},
uploadToServer(files) {
console.log(files)
return new Promise((resolve, reject) => {
const uploadedIds = []
let completed = 0
files.forEach((file, index) => {
const uploadTask = uni.uploadFile({
url: `${BASE_URL}/Mini/Worker/upload`,
filePath: file,
name: 'file',
header: {
'Content-Type': 'multipart/form-data',
'Authorization': `Bearer ${uni.getStorageSync('token')}`
},
success: (res) => {
const response = JSON.parse(res.data)
uploadedIds[index] = response.data?.data?.id
if (++completed === files.length) {
resolve(uploadedIds.filter(Boolean))
}
},
fail: (err) => {
console.error('上传失败:', err)
if (++completed === files.length) {
resolve(uploadedIds.filter(Boolean))
}
}
})
})
})
},
previewPhoto(arr, index) {
uni.previewImage({
current: index,
urls: arr
})
},
takeimg(ocrsrc) {
let inter = setInterval(() => {
var arr = ocrsrc.split(',')
this.uploadToServer(arr)
clearInterval(inter)
uni.hideLoading()
}, 700)
},
deletePhoto(index) {
uni.showModal({
title: '提示',
content: '确定要删除这张图片吗？',
success: (res) => {
if (res.confirm) {
const newPhotoData = [...this.photoData]
const newScList = [...this.scList]
newPhotoData.splice(index, 1)
newScList.splice(index, 1)
this.photoData = newPhotoData
this.$emit('tijiaoImg', newScList, this.typeimg)
uni.showToast({
title: '删除成功',
icon: 'success'
})
}
}
})
}
}
}
</script>
<style lang="scss">
.upload-compon {
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
}
.loop-img-box {
position: relative;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.img-list {
position: relative;
width: 384rpx ;
height: 254rpx;
border-radius: 8rpx;
}
.delete-btn {
width: 48rpx;
height: 48rpx;
}
.delete-icon {
width: 48rpx !important;
height: 48rpx !important;
position: absolute;
top: -4rpx;
right: -4rpx;
}
.btn-container {
margin-top: -90rpx;
display: grid;
place-items: center;
padding: 30rpx 0;
}
.btn-view-item {
width: 694rpx;
height: 90rpx;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
font-size: 32rpx;
font-weight: 700;
background-color: #00CD9F;
border-radius: 12rpx;
margin-bottom: 20rpx;
&:active {
opacity: 0.8;
}
}
</style>
这两个页面都是图片上传的公共页面，就是上传接口不一样，如何将第一个的功能放到第二个页面里面，结合第二个页面的功能，图片上传地址换成第二个页面的，然后重新写一份图片上传功能
本文介绍了一个可能与技术无关的内容，具体细节无法从给定链接中直接获取。由于缺乏具体信息，本文摘要仅能概述博客的基本指向。
扫一扫
9068
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
