更新记录
1.1(2021-12-17) 下载此版本
1.修改了删除问题 2.增加自定义选择数量 3.优化图片显示效果
1.0(2021-10-13) 下载此版本
前端H5上传文件插件,比较简便,可有可无的插件,初次写,希望多给建议。
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.2.0 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | × | √ | √ | √ |
H5选择上传文件插件
组件名:h5-uploadFile
用于H5选择上传文件。
基本用法
在 页面 import 使用
<upload-Files ref="upFiles" :uploadFileUrl="uploadFileUrl" :uFileList.sync="uFileList" :formData="formData" @uploadSuccess="uploadSuccess"></upload-Files>
import uploadFiles from '@/components/cn-h5uploadFile/upload-files';
components: {uploadFiles},
//对应组件的上传方法
this.$refs.upFiles.upload();
/*上传成功回调 */
uploadSuccess(result){
console.log("上传成功回调",result)
if(result.redata == "200"){
uni.showToast({
title:"上传成功"
})
}else{
}
},
API
Icons Props
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
uploadFileUrl | String | '' | 上传后台的URL |
formData | Object | {} | 上传额外参数 |
uFileList | array | [] | 文件URL列表 |
Icons Events
事件名 | 说明 | 返回值 |
---|---|---|
@uploadSuccess | 上传成功回调 | - data |
组件示例
下载完整示例查看