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颗小星星以作激励哈~
发表回复