使用uview UI和uni-app框架实现图片裁剪功能和上传

使用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;
		}
	}
}

---

如有问题请评论区留言,或者多参考一下上述提供的三个组件