共计 1871 个字符，预计需要花费 5 分钟才能阅读完成。
lsj-upload
插件地址：https://ext.dcloud.net.cn/plugin?id=5459
不分明应用形式可导入示例我的项目运行残缺示例
心愿能帮到你！
应用插件有任何问题欢送退出 QQ 探讨群：701468256
若能帮到你还请点亮 5 颗小星星以作激励哈~
应用阐明
| 属性 | 是否必填 | 值类型 | 默认值 | 阐明 |
|---|---|---|---|---|
| width | 否 | String | 100% | 容器宽度 |
| height | 否 | String | 80rpx | 容器高度 |
| size | 否 | Number | 10 | 附件大小下限 (M) |
| top,left,right,bottom | 否 | [Number,String] | 0 | 设置控件相对地位，仅 App 端 position=absolute 时无效，其余端若须要相对定位可自行在外层设置 css position 款式 |
| value | 否 | Number | 0 | 上传进度，通过 v -model 双向绑定 |
| childId | 否 | String | lsjUpload | 控件的 id(仅 APP 无效，尽量每个控件命名一个惟一 Id) |
| position | 否 | String | static | 控件的排版地位 (仅 APP 无效，static= 控件随页面滚动;absolute= 控件在页面中相对定位，不随窗口内容滚动;nvue 仅反对 absolute) |
| @input | 否 | Function | value | 上传进度扭转时回调 |
| @callback | 是 | Function | Object | 上传胜利时回调 |
ref 调用
| 作用 | 办法 | 传入参数类型 | 阐明 |
|---|---|---|---|
| 创立文件管理器 | create | Object | 初始化上传文件须要的必备参数, 参数见下方函数阐明 |
| 敞开文件管理器 | close | – | APP 端手动敞开 webview 层，用于切换 tab 视图, 可见示例我的项目 |
vue:
<lsj-upload
ref="lsjUpload"
width="100px"
height="80rpx"
childId="upload"
:size="10"
v-model="percent"
@input="onInput"
@callback="onCallback">
<view class="btn" style="height: 80rpx;"> 抉择附件上传 </view>
</lsj-upload>- 函数阐明
/* */
export default {data() {
return {
tabIndex: 0,
percent: ''
}
},
onReady() {
// 初始化参数并创立上传 DOM
this.onCreate();},
methods: {
// app 端切换 tab 示例
onTab(tabIndex) {
this.tabIndex = tabIndex;
if (tabIndex == 0) {
// 因为创立 webview 时须要获取按钮地位，所以须要 nextTick 后再从新调用 create
this.$nextTick(()=>{this.onCreate();
})
}
else {this.$refs.lsjUpload.close();
}
},
onCreate() {
// 初始化参数并创立上传 DOM
this.$refs.lsjUpload.create({
// #ifdef APP-PLUS
cuWebview: this.$mp.page.$getAppWebview(), // app 必传
// #endif
url: 'https://www.example.com/upload', // 替换为你的接口地址
name: 'file', // 附件 key
size: 10, // 附件上传大小下限 (M)，默认 10M
debug: true,
// 依据你接口需要自定义申请头
header: {'Authorization': 'token'},
// 依据你接口需要自定义 body 参数
formData: {'orderId': 1000}
});
},
onInput(e) {console.log('上传进度',e);
},
onCallback(e) {console.log('上传后果',e);
}
}
}
舒适提醒
- 文件上传
- 如阐明表白还不够分明，怎么调用可导入残缺示例我的项目运行体验和查看
- APP 端请优先联调 Android, 上传胜利后再运行 iOS 端，如 iOS 返回 status= 0 则须要后端开启容许跨域；
- header 的 Content-Type 类型须要与服务端要求统一，否则收不到附件（服务端若没有明文规定则可不写，应用默认匹配）
- 服务端不分明怎么配置跨域可加群征询，具体百度~
- 欢送退出 QQ 探讨群：701468256
- 欢送退出 QQ 探讨群：701468256
- 欢送退出 QQ 探讨群：701468256
- 若能帮到你还请点亮 5 颗小星星以作激励哈~
- 若能帮到你还请点亮 5 颗小星星以作激励哈~
- 若能帮到你还请点亮 5 颗小星星以作激励哈~
正文完
