<view class="uni-form-item uni-column">
<view class="title"><text class="corlorRed">*</text> 现场照片</view>
<view class="photoStyle">
<view class="photoItem">
<view>故障全貌</view>
<view class="btn" @click="uploadOption('1')">点击上传</view>
<image
v-if="img1"
:src="img1"
style="width: 25px; height: 25px; margin-left: 5px"
@longpress="previewImage(img1)"
></image>
<text
v-else
style="width: 25px; height: 25px; margin-left: 5px"
></text>
</view>
<view class="photoItem">
<view>故障详情</view>
<view class="btn" @click="uploadOption('2')">点击上传</view>
<image
v-if="img2"
:src="img2"
style="width: 25px; height: 25px; margin-left: 5px"
@longpress="previewImage(img2)"
></image>
<text
v-else
style="width: 25px; height: 25px; margin-left: 5px"
></text>
</view>
<view class="photoItem">
<view>维修详情</view>
<view class="btn" @click="uploadOption('3')">点击上传</view>
<image
v-if="img3"
:src="img3"
style="width: 25px; height: 25px; margin-left: 5px"
@longpress="previewImage(img3)"
></image>
<text
v-else
style="width: 25px; height: 25px; margin-left: 5px"
></text>
</view>
</view>
</view>压缩图片需要安装插件 const ImageCompressor = require("js-image-compressor");
// 预览图片
previewImage(url) {
uni.previewImage({
current: url, // 当前显示图片的 URL（可选，默认显示第一张）
urls: [url], // 需预览的图片列表（单张需用数组）
success: () => {}, // 可选回调
fail: (err) => console.log("预览失败:", err),
});
},
//转为文件
base64ToFile(urlData, fileName) {
let arr = urlData.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let bytes = atob(arr[1]);
let n = bytes.length;
let ia = new Uint8Array(n);
while (n--) {
ia[n] = bytes.charCodeAt(n);
}
return new File([ia], fileName, { type: mime });
},
getImgUrl(imgUrl, index) {
uni.request({
url: imgUrl, // 替换为你的图片URL
responseType: "arraybuffer",
success: (res) => {
let base64 = wx.arrayBufferToBase64(res.data);
let imageSrc = "data:image/jpg;base64," + base64;
// 将图片URL设置给图片元素的src属性
if (index == 1) {
this.img1 = imageSrc;
} else if (index == 2) {
this.img2 = imageSrc;
} else if (index == 3) {
this.img3 = imageSrc;
}
},
});
},
// 压缩图片
compressionImage(file, index) {
let _this = this;
let content = null;
let readfile = new FileReader();
return new Promise((resolve, reject) => {
// eslint-disable-next-line no-new
new ImageCompressor({
file: file,
quality: 0.8,
maxWidth: 88,
maxHeight: 88,
redressOrientation: false,
// 压缩前回调
beforeCompress: function (result) {
// console.log('压缩之前图片尺寸大小: ', result.size)
// console.log('mime 类型: ', result.type)
},
success: function (result) {
// console.log("压缩之后图片尺寸大小: ", result.size, result);
// console.log("mime 类型: ", result.type);
// console.log(
// "实际压缩率： ",
// (((file.size - result.size) / file.size) * 100).toFixed(2) + "%"
// );
content = readfile.readAsDataURL(result, "UTF-8");
readfile.onload = function (event) {
content = event.target.result;
let blod = _this.base64ToFile(
content,
new Date().getTime() + ".png"
);
// 调用后端上传接口
uni.uploadFile({
url: _this.$baseUrl + "/order/ftp/5g/uploadFile",
filePath: file.path, // 选择的图片路径
name: "file", // 后端接收文件的字段
header: {
Authorization: _this.userInfo.token,
},
success: (res) => {
let data = JSON.parse(res.data).data;
uni.showToast({
title: "上传成功",
icon: "success",
});
_this.form.images[index] = [
{
fileName: data.fileName,
fileUrl: data.fileUrl,
type: index,
},
];
if (index == 1) {
// _this.img1 = _this.$baseUrlImg + data.fileUrl;
// #ifdef H5
_this.img1 = _this.$baseUrlImg + data.fileUrl;
// #endif
// #ifdef APP-PLUS
let imgUrl = _this.$baseUrlImg + data.fileUrl;
_this.getImgUrl(imgUrl, 1);
// #endif
} else if (index == 2) {
// _this.img2 = _this.$baseUrlImg + data.fileUrl;
// #ifdef H5
_this.img2 = _this.$baseUrlImg + data.fileUrl;
// #endif
// #ifdef APP-PLUS
let imgUrl = _this.$baseUrlImg + data.fileUrl;
_this.getImgUrl(imgUrl, 2);
// #endif
} else if (index == 3) {
// _this.img3 = _this.$baseUrlImg + data.fileUrl;
// #ifdef H5
_this.img3 = _this.$baseUrlImg + data.fileUrl;
// #endif
// #ifdef APP-PLUS
let imgUrl = _this.$baseUrlImg + data.fileUrl;
_this.getImgUrl(imgUrl, 3);
// #endif
}
},
fail: (err) => {
console.error("上传失败", err);
uni.showToast({
title: "上传失败，请重试",
icon: "none",
});
},
});
};
resolve(result);
},
error(e) {
reject(e);
},
});
});
},
uploadOption(index) {
let _this = this;
uni.chooseImage({
count: 1, // 一次选择一张图片
sizeType: ["original", "compressed"], // 可选择原图或压缩图
sourceType: ["album", "camera"], // 可从相册或相机选取图片
success: function (e) {
// console.log(11111111, e);
_this.compressionImage(e.tempFiles[0], index);
},
fail: function (err) {
console.log(err);
},
});
},