@shexj/file-picker v1.0.3

Installation

You can install it by NPM:

npm i @shexj/file-picker

Also available on jsdelivr, unpkg :

<script src="https://cdn.jsdelivr.net/npm/@shexj/file-picker/dist/index.umd.js"></script>

Usage

Used in native HTML, initializes the instance:

// The element that triggers to pick files 
<button onclick="choose()">test</button>

<script type="text/javascript">
const filePicker = new FilePicker({
    resType: 'base64',
    onChange: (base64s) => {
        console.log(base64s[0])
    },
    onError: (err) => {
        console.error(err)
    }
})

function choose() {
    filePicker.choose()
}
</script>

Used in vue3（not yet support vue2）:

Global register component in main.ts :

import FilePicker from 'file-picker/dist/index.vue.js'

const app = createApp(App)
app.use(FilePicker)

Use component in .vue file:

<template>
  <div class="home">
    <file-picker :multiple="false" accept="image/*" @change="onChange">
        <button>test</button>
    </file-picker>
    <img :src="imgUrl" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const imgUrl = ref("");
const onChange = (base64s: Array<string>) => {
    imgUrl.value = base64s[0];
}
</script>

Used in the wechat browser environment:

In the wechat browser environment, it will call the relevant api of wechat sdk to evoke the image selection function, so you must make sure that JSSDK is used correctly and provide the correct configuration parameter wxConfig.

const filePicker = new FilePicker({
    wxConfig: {
        appId: "xxxxxxxxxxxx",
        nonceStr: "xxxxxxxxxxxx",
        timestamp: 1514519281,
        signature: "xxxxxxxxxxxxxxxxxxxxxxxx"
    },
    // ...other config
})

For questions about JSSDK using or wxConfig parameters, go here: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#3

Options

Apis