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>
// 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>
import FilePicker from 'file-picker/dist/index.vue.js'
const app = createApp(App)
app.use(FilePicker)
<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>
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]
Name | Type | Default | Description |
---|---|---|---|
multiple | boolean | false | Whether to select multiple options. Invalid in wechat environment, fixed false . |
accept | string | * | Follow the attribute criteria for native Input[type=file] , which can be viewed: [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/file#accept]. Invalid in wechat environment. |
resType | 'file' | 'base64' | 'base64' | The format of the parameter of the onChange callback function. Invalid in wechat environment, fixed 'base64'
|
onChange | (files:Array<string|File>)=>void | The callback after the file is selected successfully. | |
onError | (err:string)=>void | The callback when the file is selected fails. |
Name | Usage | Description |
---|---|---|
choose | filePicker.choose() | To pick files |