lsj-upload

插件地址：https://ext.dcloud.net.cn/plugin?id=5459

不分明应用形式可导入示例我的项目运行残缺示例

心愿能帮到你！

应用插件有任何问题欢送退出QQ探讨群：701468256

若能帮到你还请点亮5颗小星星以作激励哈~

应用阐明

属性是否必填值类型默认值阐明
width否String100%容器宽度
height否String80rpx容器高度
size否Number10附件大小下限(M)
top,left,right,bottom否[Number,String]0设置控件相对地位，仅App端position=absolute时无效，其余端若须要相对定位可自行在外层设置css position款式
value否Number0上传进度，通过v-model双向绑定
childId否StringlsjUpload控件的id(仅APP无效，尽量每个控件命名一个惟一Id)
position否Stringstatic控件的排版地位(仅APP无效，static=控件随页面滚动;absolute=控件在页面中相对定位，不随窗口内容滚动;nvue仅反对absolute)
@input否Functionvalue上传进度扭转时回调
@callback是FunctionObject上传胜利时回调

ref调用

作用办法传入参数类型阐明
创立文件管理器createObject初始化上传文件须要的必备参数,参数见下方函数阐明
敞开文件管理器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颗小星星以作激励哈~