使用uview UI和uni-app框架实现图片裁剪功能和上传
写之前参考一下下面三个组件教程,接下来的代码和这三个组件有关
uView AvatarCropper 头像裁剪
uView Upload 上传
uni-app文件上传
写之前先把uView自带的裁剪图片页面注册在pages.json里面(如下代码,更多请看uView头像裁剪组件)
{
"path": "uview-ui/components/u-avatar-cropper/u-avatar-cropper",
"style": {
"navigationBarTitleText": "裁剪",
"navigationBarBackgroundColor": "#000000"
}
}
下面开始写页面代码
data属性
data() {
return {
uploadUrl: '上传地址', // 上传地址
header: {
Authorization: '请求头'
}, // 一般需要请求头,每个项目不相同
fileList:[],
lists: [],
avatar: ''
}
},
view标签
<view class="upload">
<!-- upload上传组件,如果上传列表不为空就显示 -->
<u-upload ref="brandWechat" :file-list="fileList" :action="uploadUrl"
:header="header" :auto-upload="false" max-count = "1"
@on-change="changeBrandWechat" name="image"
:show-progress = "false" @on-remove = "onRemoveBrandWechatImage"
v-if="lists.length > 0">
</u-upload>
<!-- 手写的上传按钮样式,如果上传列表不为空就隐藏 -->
<view class="upload-btn" @click="beforeUploadBrandWechat" v-else>
<!-- 剪刀图标,按照自己需求来换图标 -->
<u-icon name="cut" class="u-add-btn" size="40"></u-icon>
<view class="u-add-tips">裁剪二维码</view>
</view>
</view>
加载方法和操作方法
created() {
// 监听从裁剪页发布的事件,获得裁剪结果,base64
// 裁剪后的结果,通过uni.$on监听uAvatarCropper事件,由于uni-app限制,H5端裁剪的结果为base64格式,其他端为blod二进制形式, 如果后端对接收格式有要求,请自行处理
uni.$on('uAvatarCropper', path => {
this.avatar = path;
this.fileList = [{ url : path}];
this.lists = [{ url : path}];
console.log(path);
// 上传图片,放在这个地方裁剪完图片就自动上传,也可以根据需求放在提交按钮上进行手动上传
this.upload();
})
},
methods: {
beforeUploadBrandWechat() {
// 调用uview官方文档的裁剪页面
this.$u.route({
// 在page.json注册的uview自带的裁剪文件路径
url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
params: {
// 输出图片宽度,高等于宽,单位px
destWidth: 300,
// 裁剪框宽度,高等于宽,单位px
rectWidth: 200,
// 输出的图片类型,如果'png'类型发现裁剪的图片太大,改成"jpg"即可
fileType: 'jpg',
}
})
},
// 上传图片
upload(){
// uniapp上传代码方法
uni.uploadFile({
url: this.uploadUrl, // 后端请求链接
filePath: this.avatar, // 图片
header: this.header, // 请求头
name: 'image', // 后端接收的名字
success: (res) => {
console.log("成功");
console.log(JSON.parse(res.data).data.keyRes); // 返回值根据后端返回自行判断
},
fail: (res) => {
console.log('失败')
}
});
}
}
CSS样式
这里只提供裁剪按钮和裁剪成功后图片显示的样式,页面样式请根据自己的样式来设计
.upload{
display: flex;
align-items: center;
margin-top: 20rpx;
.upload-btn{
width: 200rpx;
height: 200rpx;
overflow: hidden;
margin: 10rpx;
background: rgb(244, 245, 246);
position: relative;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #606266;
font-size: 26rpx;
.u-add-tips {
margin-top: 20rpx;
line-height: 40rpx;
}
}
}
如有问题请评论区留言,或者多参考一下上述提供的三个组件