jigangSCM2/jnpf-app/components/jnpf/jnpf-file-comment

lsj-upload

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

不清楚使用方式可导入示例项目运行完整示例

希望能帮到你！

使用插件有任何问题欢迎加入QQ讨论群：701468256

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

使用说明

属性	是否必填	值类型	默认值	说明
option	是	Object	-	上传附件的接口地址和参数
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调用

作用	方法	传入参数类型	说明
渲染控件	show	Object	需要手动渲染控件时调用,可见示例项目
隐藏控件	hide	-	APP端手动隐藏webview层，用于切换tab视图,可见示例项目

注意

重要提示：

show() 需要在this.$nextTick内调用

hide() 函数调用时机

因为是覆盖了一层webview窗口在视图上，若窗口有切换tab或弹出prop层，需要调用hide来禁止控件触发点击（调用show恢复）

vue:

<lsj-upload 
ref="lsjUpload"
width="100px"
height="80rpx"
childId="upload"
:size="10"
:option="option"
v-model="percent"
@input="onInput"
@callback="onCallback">
	<view class="btn" style="height: 80rpx;">选择附件上传</view>
</lsj-upload>

---

• 函数说明

/*  */
export default {
	data() {
		return {
			option: {},
			tabIndex: 0,
			percent: '',
			list:[]
		}
	},
	onReady() {
		// 初始化参数并创建上传DOM
		this.option = {
			// #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
			}
		};
	},
	methods: {
		add() {
			this.list.push('DOM重排测试');
		},
		open() {
			uni.navigateTo({
				url:'../nvue-demo/nvue-demo'
			})
		},
		onTab(tabIndex) {
			this.tabIndex = tabIndex;
			
			if (tabIndex == 0 ) {
				this.$nextTick(()=>{
					this.$refs.lsjUpload.show();
				})
			}
			else {
				this.$refs.lsjUpload.hide();
			}
			
		}
		onInput(e) {
			console.log('上传进度',e);
		},
		onCallback(e) {
			console.log('上传结果',e);
		}
	}
}

温馨提示

• 文件上传

0. 如说明表达还不够清楚，怎么调用可导入完整示例项目运行体验和查看
1. APP端请优先联调Android,上传成功后再运行iOS端，如iOS返回status=0则需要后端开启允许跨域；
2. header的Content-Type类型需要与服务端要求一致，否则收不到附件（服务端若没有明文规定则可不写，使用默认匹配）
3. 服务端不清楚怎么配置跨域可加群咨询，具体百度~
4. 欢迎加入QQ讨论群：701468256(已满)
5. 欢迎加入QQ讨论群：469580165
6. 欢迎加入QQ讨论群：469580165
7. 若能帮到你还请点亮5颗小星星以作鼓励哈~
8. 若能帮到你还请点亮5颗小星星以作鼓励哈~
9. 若能帮到你还请点亮5颗小星星以作鼓励哈~