UniApp实现图片上传与裁剪的实现方法-猿码集

UniApp实现图片上传与裁剪的实现方法

一、UniApp简介

UniApp是一个基于Vue.js框架的跨平台开发框架，开发人员只需要编写一次代码，就能够发布到多个平台（iOS、Android、Web等），大大节省了开发和维护成本。

二、UniApp图片上传与裁剪的必要性

在实际开发中，图片上传与裁剪是一个非常基础的功能，几乎所有App都需要实现。在UniApp开发中，我们可以利用uni.uploadFile和uni.chooseImage API来实现图片上传功能，而图片裁剪则需要借助第三方插件。

三、UniApp图片上传的实现方法

3.1 uni.chooseImage()

uni.chooseImage()是UniApp提供的API，用于从本地相册或相机中选择图片。通过设置count参数可以选择一次性选择多张图片，而sizeType和sourceType参数则可以控制选择的图片类型和来源。


uni.chooseImage({
    count: 1, // 最多可以选择的文件个数，默认为9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
    }
});

3.2 uni.uploadFile()

uni.uploadFile()是UniApp提供的API，用于上传图片至服务器。我们只需要设置filePath、name、url等参数即可将图片上传至目标服务器。


uni.uploadFile({
    url: 'http://localhost:8080/upload',
    filePath: 'tempFilePaths[0]',
    name: 'file',
    success: function (res) {
        console.log('上传成功');
    },
    fail: function (res) {
        console.log('上传失败');
    }
});

四、UniApp图片裁剪的实现方法

UniApp本身并没有提供图片裁剪的API，但我们可以借助第三方插件来实现这个功能。本文以使用第三方插件的方式实现图片裁剪为例，介绍具体的实现方法。

4.1 安装插件

在HBuilderX中使用npm命令安装uview-ui插件。

npm install uview-ui

4.2 在页面中引入裁剪组件

在需要使用图片裁剪的页面的vue文件中，引入uview-ui组件库和uview-ui的图片裁剪组件。


<template>
    <view>
        <u-cropper 
            ref="cropper" 
            :config="cropperConfig" 
            @load="cropperLoad" 
            @success="cropperSuccess" 
            @fail="cropperFail">
        </u-cropper>
    </view>
</template>
<script>
    import uView from 'uview-ui';
    export default {
        components: {
            'u-cropper': uView['u-cropper']
        },
    };
</script>
<style>
    /* 样式 */
</style>

4.3 绑定裁剪事件

在vue文件的methods中绑定裁剪事件。


methods: {
    cropperLoad: function (e) {
        console.log('裁剪器初始化完成');
    },
    cropperSuccess: function (res) {
        console.log('裁剪成功，图片的临时路径为：' + res.url);
    },
    cropperFail: function (msg) {
        console.log('裁剪失败：' + msg);
    },
}

4.4 初始化裁剪设置

在vue文件的data中初始化裁剪设置。


data() {
    return {
        cropperConfig: {
            cut: {
                x: (this.sysWidth - this.cutSize) / 2,
                y: (this.sysHeight - this.cutSize) / 2,
                width: this.cutSize,
                height: this.cutSize
            },
            src: '',
            mode: 'scaleToFill',
            sizeType: ['original', 'compressed'],
            fileType: ['jpg', 'jpeg', 'png'],
            quality: 80,
        },
    };
},

4.5 调用裁剪方法

在需要使用裁剪的页面中，通过uni.chooseImage()方法选择图片后，将返回的图片路径设置给裁剪组件的src属性，然后调用裁剪组件自带的裁剪方法即可实现图片裁剪。


uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: function (res) {
        var tempFilePaths = res.tempFilePaths;
        // 将图片路径设置给裁剪组件的src属性
        this.$refs.cropper.src = tempFilePaths[0];
        // 调用裁剪组件的裁剪方法
        this.$refs.cropper.upload();
    }
});

五、结语

以上就是UniApp实现图片上传与裁剪的完整实现方法。通过uni.chooseImage()和uni.uploadFile()实现图片上传功能，通过第三方插件实现图片裁剪功能，可以极大地简化图片上传、裁剪的开发难度，提高开发效率。