上传图片格式转换

package/jobIntention/companyImg.vue

@@ -3,140 +3,190 @@
 		<nav-bar title="公司认证" color="#000"></nav-bar>
 		<view class="company-content">
 			<view class="company-title">上传公司营业执照</view>
-			<view class="company-desc">请上传“{{companyName}}”的营业执照</view>
-			<view class="company-btn">修改公司</view>
+			<view class="company-desc">请上传“{{ companyName }}”的营业执照</view>
+
+			<!-- 上传区域 -->
 			<view class="upload-img">
-				<u-upload :action="action" :max-size="5 * 1024 * 1024" max-count="1" class="upload" ref="uUpload"
-					width="452" height="322" :before-upload="handleBeforeUpload"></u-upload>
+				<image v-if="filePath" :src="filePath" mode="aspectFit"
+					style="height:322rpx; width:100%; border-radius:8rpx">
+				</image>
+				<view v-else
+					style="color:#666;font-size:24rpx; flex:1; display:flex; justify-content:center; align-items:center;"
+					@click="chooseImage">
+					点击上传图片
+				</view>
+
+				<!-- 删除按钮 -->
+				<view v-if="filePath" class="delete-btn" @click="deleteImage">×</view>
+				<!-- 点击整个区域选择图片 -->
+				<view v-if="!filePath" class="choose-overlay" @click="chooseImage"></view>
 			</view>
+
 			<view class="warning-title">注意事项</view>
 			<view class="warning-desc">1.拍摄与所填公司一致的营业执照上传</view>
 			<view class="warning-desc">2.最新下发的营业执照</view>
 			<view class="warning-desc">3.营业执照信息和公章清晰可辨</view>
 		</view>
+
 		<view class="bottom-btn" @click="goUnderReview">确认并提交</view>
 	</view>
 </template>
+
 <script>
 	import navBar from "@/components/nav-bar/index.vue";
-	import configdata from '../../common/config.js'
-	import heic2any from "@/common/heic2any.min.js";
+	import configdata from '../../common/config.js';
+
 	export default {
 		data() {
 			return {
-				address: "",
-				addressDetail: "",
 				companyName: "",
 				companyId: "",
-				action: configdata.APIHOST1 + '/alioss/upload',
-				lists: []
+				filePath: "", // 图片路径
+				uploadUrl: "", // 上传服务器返回的 URL
+				action: configdata.APIHOST1 + '/alioss/upload'
 			};
 		},
 		components: {
-			navBar,
+			navBar
 		},
 		onLoad(options) {
-			// 接收上个页面传递的公司名称参数
-			if (options.companyName) {
-
-				this.companyName = decodeURIComponent(options.companyName);
-				console.log('接收的公司名称：', this.companyName);
-			}
-			if (options.companyId) {
-				this.companyId = options.companyId;
-				console.log('接收的公司ID：', this.companyId);
-			}
-		},
-		onReady() {
-			// 得到整个组件对象，内部图片列表变量为"lists"
-			this.lists = this.$refs.uUpload.lists;
+			if (options.companyName) this.companyName = decodeURIComponent(options.companyName);
+			if (options.companyId) this.companyId = options.companyId;
 		},
 		methods: {
-			// 上传前处理（HEIC 转 JPG）
-			async handleBeforeUpload(file) {
-				// 检查是否是 HEIC 文件
-				const isHeic = file.name.toLowerCase().endsWith('.heic') || file.type === 'image/heic';
-				if (!isHeic) {
-					return true; // 非 HEIC 图片直接上传
-				}
+			// 选择图片
+			chooseImage() {
+				uni.chooseImage({
+					count: 1,
+					success: async (res) => {
+						let tempFilePath = res.tempFilePaths[0];
 
-				uni.showLoading({
-					title: '正在转换HEIC图片...'
+						// iOS HEIC 转 JPG
+						if (tempFilePath.toLowerCase().endsWith('.heic')) {
+							uni.showLoading({
+								title: '正在转换图片...'
+							});
+							try {
+								const newPath = await this.convertHeicToJpg(tempFilePath);
+								this.filePath = newPath;
+							} catch (e) {
+								console.error('HEIC 转换失败:', e);
+								uni.showToast({
+									title: 'HEIC 转换失败，请使用 JPG/PNG',
+									icon: 'none'
+								});
+								return;
+							} finally {
+								uni.hideLoading();
+							}
+						} else {
+							this.filePath = tempFilePath;
+						}
+					}
 				});
+			},
 
-				try {
-					// 使用 heic2any 转换
-					const blob = await heic2any({
-						blob: file,
-						toType: 'image/jpeg',
-						quality: 0.9,
-					});
+			// 删除图片
+			deleteImage() {
+				this.filePath = "";
+				this.uploadUrl = "";
+			},
 
-					// 把 Blob 转为新的 File 对象
-					const newFile = new File([blob], file.name.replace(/\.heic$/i, '.jpg'), {
-						type: 'image/jpeg',
+			// Canvas 转 JPG
+			convertHeicToJpg(path) {
+				return new Promise((resolve, reject) => {
+					uni.getImageInfo({
+						src: path,
+						success: (img) => {
+							const ctx = uni.createCanvasContext('myCanvas', this);
+							ctx.drawImage(path, 0, 0, img.width, img.height);
+							ctx.draw(false, () => {
+								uni.canvasToTempFilePath({
+									canvasId: 'myCanvas',
+									fileType: 'jpg',
+									quality: 0.9,
+									success: (res) => resolve(res.tempFilePath),
+									fail: (err) => reject(err)
+								}, this);
+							});
+						},
+						fail: (err) => reject(err)
 					});
+				});
+			},
 
-					uni.hideLoading();
-					uni.showToast({
-						title: '格式已转换为JPG',
-						icon: 'none'
+			// 上传文件
+			async uploadFile() {
+				return new Promise((resolve, reject) => {
+					uni.uploadFile({
+						url: this.action,
+						filePath: this.filePath,
+						name: 'file',
+						success: (res) => {
+							const data = JSON.parse(res.data);
+							if (data.code === 0 && data.data) {
+								this.uploadUrl = data.data;
+								resolve(this.uploadUrl);
+							} else {
+								reject(data.msg || '上传失败');
+							}
+						},
+						fail: (err) => reject(err)
 					});
+				});
+			},
 
-					return newFile; // 返回新文件对象，u-upload 会自动上传它
-				} catch (error) {
-					console.error('HEIC 转换失败：', error);
-					uni.hideLoading();
+			// 提交
+			async goUnderReview() {
+				if (!this.filePath) {
 					uni.showToast({
-						title: 'HEIC格式转换失败，请改为JPG/PNG后重试',
-						icon: 'none',
+						title: '请先选择图片',
+						icon: 'none'
 					});
-					return false; // 阻止上传
+					return;
 				}
-			},
-
-			// 你原来的方法
-			goUnderReview() {
-				console.log(this.lists[0].response.data);
-				const url = this.lists[0].response.data;
-				const data = {
-					companyCertification: url,
-					companyId: (this.companyId === undefined || this.companyId === 'undefined') ? '' : this.companyId,
-				};
 
 				uni.showLoading({
-					title: "提交中..."
+					title: '上传中...'
 				});
-				this.$Request.postJson("/app/company/updateCompany", data)
-					.then((res) => {
-						uni.hideLoading();
-						if (res.code === 0) {
-							uni.showToast({
-								title: "提交成功",
-								icon: "success"
-							});
-							uni.navigateTo({
-								url: "/package/jobIntention/completeMsg"
-							});
-						} else {
-							uni.showToast({
-								title: res.msg || "提交失败",
-								icon: "none"
-							});
-						}
-					})
-					.catch((err) => {
-						uni.hideLoading();
-						console.error("提交失败：", err);
+				try {
+					await this.uploadFile();
+					const data = {
+						companyCertification: this.uploadUrl,
+						companyId: this.companyId || ''
+					};
+
+					const res = await this.$Request.postJson("/app/company/updateCompany", data);
+					uni.hideLoading();
+					if (res.code === 0) {
 						uni.showToast({
-							title: "网络异常",
-							icon: "none"
+							title: '提交成功',
+							icon: 'success'
+						});
+						uni.navigateTo({
+							url: "/package/jobIntention/completeMsg"
 						});
+					} else {
+						uni.showToast({
+							title: res.msg || '提交失败',
+							icon: 'none'
+						});
+					}
+				} catch (e) {
+					uni.hideLoading();
+					console.error('提交失败', e);
+					uni.showToast({
+						title: e || '网络异常',
+						icon: 'none'
 					});
+				}
 			}
-		},
+		}
 	};
 </script>
+
+<canvas canvas-id="myCanvas" style="width:1px;height:1px;position:absolute;top:-1000rpx"></canvas>
+
 <style scoped lang="scss">
 	.company {
 		position: absolute;
@@ -187,6 +237,24 @@
 				justify-content: center;
 				align-items: center;
 				margin-top: 20rpx;
+				position: relative;
+				cursor: pointer;
+			}
+
+			/* 删除按钮 */
+			.delete-btn {
+				position: absolute;
+				top: 10rpx;
+				right: 10rpx;
+				width: 36rpx;
+				height: 36rpx;
+				line-height: 36rpx;
+				text-align: center;
+				background: rgba(0, 0, 0, 0.5);
+				color: #fff;
+				border-radius: 50%;
+				font-size: 28rpx;
+				z-index: 10;
 			}
 
 			.warning-title {
@@ -195,7 +263,6 @@
 				font-size: 28rpx;
 				font-weight: 500;
 				margin-top: 20rpx;
-
 			}
 
 			.warning-desc {

uview-ui/components/u-upload/u-upload.vue

@@ -229,7 +229,7 @@
 				default () {
 					// 支付宝小程序真机选择图片的后缀为"image"
 					// https://opendocs.alipay.com/mini/api/media-image
-					return ['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'];
+					return ['png', 'jpg', 'jpeg', 'webp', 'gif', 'image','heic'];
 				}
 			},
 			// 在各个回调事件中的最后一个参数返回，用于区别是哪一个组件的事件