更新记录

1.0.3(2024-08-03) 下载此版本

适配微信小程序

1.0.2(2024-07-29) 下载此版本

修改问题

1.0.1(2024-07-29) 下载此版本

修改问题

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

jack-filepicker简介

jack-filepicker是一款适用于H5端和微信小程序的图片编辑器,本组件支持选择图片后进行直接编辑的操作,进行添加时间、位置、旋转、裁剪和涂鸦,具体效果看下方的gif。

开发文档

1.首先导入本组件到项目。

2.在main.js中引入并安装。

import JackFileupload from "@/uni_modules/jack-filepicker/components/jack-fileupload/jack-fileupload.vue"
//全局注册组件
Vue.component("JackFileupload", JackFileupload)

3.在页面中使用组件。

<jack-fileupload  />

4.h5中,在manifest.json源码视图的 h5 中配置[高德应用申请的key-web服务API](创建应用和 Key-Web服务 API | 高德地图API (amap.com)),否则无法使用定位功能,同时在源码视图中将manifest.json中的注释删除。

5.微信小程序中,在manifest.json 源码视图的 mp-weixin中添加如下配置,同时在源码视图中将manifest.json中的注释删除:

"mp-weixin": {
        "appid": "",
        "setting": {
            "urlCheck": false
        },
        "usingComponents": true,
        //新加配置如下
        "requiredPrivateInfos": ["getLocation"],
        "permission": {
            "scope.userLocation": {
                "desc": "你的位置信息将用于位置信息展示"
            }
        }
        //新加配置结束
    },

5.在项目根目录进行下node_modules依赖的安装

npm i @amap/amap-jsapi-loader --save

注意:

1.h5调试添加位置功能时,请在dege中调试(推荐);或者使用https协议的域名代理到本地址进行访问;也可以发布到服务器使用https域名访问');

2.微信小程序调试裁剪功能时,请在真机调试下进行。

配置说明

参数名 说明 类型 例子 默认值 可选值
limit 最多可选的文件数 Number 2 1 -
readonly 组件是否只读(只能查看已经绑定的图片) Boolean true false -
disablePreview 是否禁止预览图片 Boolean true false -
delIcon 是否显示删除图片按钮 Boolean true false -
title 组件上方的文字提示(左侧显示标题,右侧显示上传数和可上传数,showTitle=true生效) string 请选择图片 请选择图片 -
sourceType 选择的方式(从相册选择还是使用相机,默认都有) Array ['album'] ['album', 'camera'] ['album', 'camera']
fileExtname 选择的图片后缀名,不可为空数组 Array ['.png'] ['.png','.jpg','.jpeg','.webp'] -
v-model 组件绑定的图片链接,用来回显,也可以上传完成后对绑定的属性赋值 Array ['http://zhiyin-caixukun.png'] [] -
showTitle 是否显示组件标题 Boolean false true -

事件

事件名 事件说明 返回参数
@delete 删除图片 见下文
@finishEdit 完成图片的编辑 编辑完成返回此图片blob链接
//@delete 返回参数
{
    index,//删除的图片索引
    url//删除的图片链接
}

示例

<template>
    <view class="content">
        <jack-fileupload
            v-model="list" 
            :limit="3" 
            :readonly="false"
            :disablePreview="false"
            :delIcon="true"
            :showTitle="true"
            title="请选择图片"
            :sourceType="['album', 'camera']"
            :fileExtname="['.png']"
            @finishEdit="saveSucc" 
            @delete="deleteItem" 
            />
        <button @click="upload">123</button>
        <uni-file-picker ref="uploadRef" return-type="array" v-model="list" limit="5" @select="select" mode="grid"
            @success="success" @delete="deleteI" file-mediatype="image" title="最多选择5个文件"></uni-file-picker>
    </view>
</template>

<script>
    import {
        handleOper
    } from "@/custom-tab-bar/utils/index.js"
    export default {
        data() {
            return {
                list: [],
                title: 'Hello',
                read: false,
            }
        },
        onLoad() {

        },
        methods: {
            upload() {},
            saveSucc(e) {
                uni.uploadFile({
                    url: 'http://localhost:84/upload',
                    filePath: e,
                    name: 'file',
                    formData: {
                        fileName: 'file.png'
                    },
                    success: res => {
                        this.list.push(JSON.parse(res.data).url)
                    }
                })
            },
            deleteItem(e) {
                console.log(e);
            },
            success(e) {
                console.log(e);
                console.log(this.list);
            },
            select(e) {
                console.log(e);
                this.$refs.uploadRef.upload()
                console.log(this.list);
            },
            deleteI(index) {
                console.log(index);
            }
        },
        onShow() {
            handleOper.call(this)
        },
        watch:{
            list(){
                console.log(this.list.length);
            }
        }
    }
</script>

<style>

</style>

小结

微信小程序端由于原生canvas组件层级问题,图片过长在真机会出现覆盖工具栏的问题,暂时未解决,请各位大佬指点迷津。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

定位 相机 文件 相册

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

仅在本地使用文件数据,不上传到服务器

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问