之前2.0版插件虽然解决了大部分人在uniapp选择文件上传的问题，但因为是webview实现，将点击层定位到页面按钮上，还是有缺陷，例如页面如果有固定的内容，会被webview遮挡导致误触发文件选择；例如页面上按钮位置重排需要调用组件的刷新位置重新定位；iOS和H5端需要接口放开跨域等；
基于以上等问题，我将2.0重构了，现在3.0版直接使用js调用组件的方法，不再需要关心定位问题，并且组件新增了文件相关实用方法如：
选择文件、上传文件、获取文件临时路径、base64、ArrayBuffer、文件切片、打开文件等。
力求简化开发，让选择文件上传不再复杂，以下是文档，需要的小伙伴点击查看
🎯 全能文件选择上传插件地址：https://ext.dcloud.net.cn/plugin?id=5459
3.0版文档
API式调用选择器，支持pdf、doc、zip...等所有类型文件
props
| 属性 | 是否必填 | 值类型 | 默认值 | 说明 |
|---|---|---|---|---|
| debug | 否 | Boolean | false | 开启调试日志 |
| distinct | 否 | Boolean | false | 同名文件是否覆盖 |
API
| 方法名 | 参数 | 支持平台 | 说明 |
|---|---|---|---|
| chooseFile | chooseFile参数说明 | App/H5/微信小程序 | 文件选择 |
| upload | upload参数说明 | App/H5/微信小程序 | 文件上传 |
| getTempFilePath | 文件处理参数说明 | App/H5/微信小程序 | 获取文件临时路径 |
| getBase | 文件处理参数说明 | App/H5/微信小程序 | 获取文件base64 |
| getArrayBuffer | 文件处理参数说明 | App/H5/微信小程序 | 获取文件ArrayBuffer |
| openDocument | 文件处理参数说明 | App/H5/微信小程序 | 打开文件 |
| abort | file | App/H5/微信小程序 | 中断上传 |
| deleted | file | App/H5 | 删除文件 |
| clear | - | App/H5 | 清空文件 |
chooseFile参数说明 Object
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| count | Number | 否 | 9 | 允许选择的文件个数 |
| size | Number | 否 | 10 | 单个文件大小上限，单位兆(M) |
| multiple | Boolean | 否 | true | 是否允许多选（count=1时强制禁止多选） |
| formats | String | 否 | - | 允许选择的格式，空串等于不限制,多个以逗号隔开,例如 'png,jpg,jpeg' |
| accept | String | 否 | - | 原生input file属性，控制系统弹框可选文件类型展示 |
| success | Function | 否 | - | 成功回调 |
| fail | Function | 否 | - | 失败回调 |
upload参数说明 Object
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| file | Object | 是 | - | chooseFile返回的file |
| url | String | 是 | - | 上传文件的服务端接口地址 |
| name | String | 否 | 'file' | 服务端接收文件字段的key |
| method | String | 否 | 'post' | 请求协议类型 |
| header | Object | 否 | - | HTTP 请求 Header |
| formData | Object | 否 | - | HTTP 请求中其他额外的 form data |
| onprogress | Function | 否 | - | 上传进度回调（持续） |
| success | Function | 否 | - | 成功回调 |
| fail | Function | 否 | - | 失败回调 |
文件处理参数说明
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| file | Object | 是 | - | chooseFile返回的file |
| success | Function | 否 | - | 成功回调 |
| fail | Function | 否 | - | 失败回调 |
3.0版使用示例
<template>
<view>
<lsj-upload debug ref="lsjUploadRef"></lsj-upload>
<view style="padding: 8rpx 60rpx;">
<button @click="onClick">chooseFile (选择文件)</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
files: [],
tempFilePath: '',
base64: ''
}
},
onLoad() {
},
methods: {
// 选择文件
onClick() {
this.$refs.lsjUploadRef.chooseFile({
count: 2,
size: 8,
success:(files) => {
this.files = files;
console.log('files',files);
this.files.forEach(file=> {
// 上传到服务器（使用组件内upload需要接口支持跨域）
// this.uploadHandle(file);
// 获取文件地址（如接口不支持跨域，
// 可调以下方法获取文件地址后调uni.uploadFile上传）
// this.getTempFilePath(file);
})
}
})
},
// 上传到服务器
uploadHandle(file) {
this.$refs.lsjUploadRef.upload({
url: 'http://lsj.tech.com/dropbox/document/upload', //替换成你的接口地址
file,
name: 'file',
method: 'post',
header: {},
formData: {},
onprogress:(e)=> {
file.status = 'progress';
console.log('上传中：',e);
},
success:(e) => {
file.status = 'success';
console.log('上传成功',e);
},
fail:(e) => {
file.status = 'fail';
console.log('上传失败',e);
}
});
},
// 获取文件TempFilePath
getTempFilePath(file) {
this.$refs.lsjUploadRef.getTempFilePath({
file,
success:(e) => {
this.tempFilePath = e.result;
}
});
},
// 获取文件base64
getBase(file) {
this.$refs.lsjUploadRef.getBase({
file,
success:(e) => {
// #ifndef MP
this.base64 = e.result;
// #endif
// #ifdef MP
this.base64 = 'data:image/png;base64,' + e.result;
// #endif
}
});
},
// 获取文件ArrayBuffer
getArrayBuffer(file) {
this.$refs.lsjUploadRef.getArrayBuffer({
file,
success:(e) => {
console.log('ArrayBuffer',e.result);
}
});
},
// 打开文件
openDocument(file) {
this.$refs.lsjUploadRef.openDocument({
file,
success:(e) => {
console.log('打开文件成功');
}
});
},
// 终止上传文件
onAbort(file) {
if (file.status === 'progress') {
this.$refs.lsjUploadRef.abort(file);
}
},
// 删除指定文件
del(index) {
// 删除页面上文件列表时需要将组件内缓存的文件一并删除
this.$refs.lsjUploadRef.deleted(this.files[index]);
this.files.splice(index,1);
},
// 清空所有文件
clear() {
this.$refs.lsjUploadRef.clear();
this.files = [];
},
}
}
</script>
