wxml
<canvas type="" id="compressCanvas" canvas-id="compressCanvas" style="position: absolute;top: -100000rpx;z-index: -10000;width: {
{
width}}px;height: {
{
height}}px;" />
<view wx:if="{
{!img}}" class="upload flex-column-center" bind:tap="chooseImageAndUpload" data-img="img">
<image catch:tap="chooseImageAndUpload" data-img="img" src="../../static/images/upload.png" mode="" />
<text catch:tap="chooseImageAndUpload" data-img="img">请上传行驶证正面</text>
</view>
<image bind:tap="previewImage" data-img="img" class="" style="width: 300rpx;height: 200rpx;border-radius: 30rpx;margin-top: 15rpx;position: relative;" wx:else src="{
{img}}" mode="">
<image bind:tap="del" data-img="img" style="position: absolute;right: 20rpx;top: 20rpx;width: 50rpx;height: 50rpx;" src="../../static/images/close.png" mode="" />
</image>
wxss
.topone image {
width: 50rpx;
height: 50rpx;
margin-bottom: 10rpx;
}
.flex-column-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
这里将
1.图片选择，
2.压缩
3.上传
4.删除（可以只删除提交前的数据，想从服务器中删除需要调用接口）
等方法统一封装在混入中
const MyUploadImgMixin = {
methods: {
// 图片选择
async chooseImageAndUpload(e) {
console.log(e.target.dataset.img);
wx.chooseMedia({
count: 1,
// 最多可以选择的文件个数，基础库2.25.0前，最多可支持9个文件，2.25.0及以后最多可支持20个文件
mediaType: ['image'],
// 只能拍摄图片或从相册选择图片
sizeType: ['compressed'],
// 是否压缩所选文件
sourceType: ['album', 'camera'],
// 图片和视频选择的来源
// maxDuration: 30,
// 拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 60s 之间。不限制相册。
camera: 'back',
// 仅在 sourceType 为 camera 时生效，使用前置或后置摄像头
success: async (res) => {
console.log(res);
const tempFilePath = res.tempFiles[0].tempFilePath;
console.log(tempFilePath);
try {
// 压缩图片
console.log(e.target.dataset.img, 'e.target.dataset.img');
const compressedFilePath = await this.compressImage(tempFilePath, e.target.dataset.img);
console.log('压缩后的图片路径:', compressedFilePath);
// 这里可以添加上传图片的逻辑
// 示例：使用wx.uploadFile上传压缩后的图片到服务器
// await this.uploadCompressedImage(compressedFilePath);
} catch (error) {
console.error('图片压缩时发生错误:', error);
}
},
fail: (err) => {
console.error('选择图片失败:', err);
},
});
},
// 图片压缩
compressImage(tempFilePath, e) {
let that = this
// 获取系统信息，用于计算压缩比例
wx.getImageInfo({
src: tempFilePath,
success: function (res) {
console.log(res);
const width = res.width
const height = res.height
// 使用Canvas进行图片压缩
const canvasId = 'compressCanvas';
const ctx = wx.createCanvasContext(canvasId);
// ctx.drawImage(tempFilePath, 0, 0, width < 300 ? width : 300, height < 150 ? height : 150);
ctx.drawImage(tempFilePath, 0, 0, width, height);
ctx.draw(false, () => {
// 将canvas内容导出为临时文件，实现压缩
wx.canvasToTempFilePath({
canvasId: canvasId,
// width: width,
// height: height,
// 画布标识，传入 canvas 组件的 canvas-id
// destWidth: width, // 输出的图片的宽度 width*屏幕像素密度
// destHeight: height,
// quality: 0.9,
fileType: 'jpg', // 目标文件的类型
success: function (res) {
const compressedFilePath = res.tempFilePath;
console.log('图片压缩成功，路径为：', compressedFilePath);
// // 保存到本地
// wx.saveImageToPhotosAlbum({
// filePath: compressedFilePath,
// })
// 上传到服务器之前，可以用临时地址预览，可以上传之后，改为上传之后返回地址预览
console.log(e);
let propName = e;
// 构建一个动态的对象
let dataToUpdate = {
};
dataToUpdate[propName] = compressedFilePath; // 动态设置属性名和值
console.log(dataToUpdate);
that.setData(dataToUpdate);
// 这里可以进行图片上传操作
that.uploadCompressedImage(compressedFilePath);
},
fail: function (err) {
console.error('图片压缩失败', err);
}
});
});
}
});
},
// 图片上传
uploadCompressedImage(filePath) {
wx.uploadFile({
url: '你的上传接口地址', // 服务器上传接口地址
filePath: filePath,
name: 'file', // 对应后台接收文件的字段名
formData: {
// 其他额外表单数据
},
success: (uploadResult) => {
console.log('图片上传成功', uploadResult);
// 解析服务器响应
const data = JSON.parse(uploadResult.data);
if (data.success) {
wx.showToast({
title: '上传成功',
icon: 'success',
duration: 2000,
});
} else {
wx.showToast({
title: '上传失败',
icon: 'none',
duration: 2000,
});
}
},
fail: (err) => {
console.error('图片上传失败:', err);
wx.showToast({
title: '上传失败',
icon: 'none',
duration: 2000,
});
},
});
},
previewImage(e) {
wx.previewImage({
current: this.data[e.target.dataset.img], // 当前显示图片的链接
urls: [this.data[e.target.dataset.img]] // 需要预览的图片链接列表
})
},
del(e) {
// 假设你有一个条件来决定更新哪个属性
let propName = e.target.dataset.img; // 或者根据条件动态决定如：condition ? 'img' : 'alternativeProp'
// 构建一个动态的对象
let dataToUpdate = {
};
dataToUpdate[propName] = null; // 动态设置属性名和值
// 使用这个动态对象调用setData
this.setData(dataToUpdate);
},
},
};
module.exports = MyUploadImgMixin;
注意
这里点击选择图片时候，会有点击事件的问题，因为里面有两个元素，所以也要定义点击事件，而已要使用catch:tap阻止事件冒泡
文章评论