uni-app uni-file-picker 上传组件实战应用_uni-file-picker详细使用教学

html

<!-- 导入---------------------------------------- -->
<uni-file-picker 
limit="1" 
:file-extname="fmt" 
file-mediatype="all" 
:disabled="percent < 100"
:auto-upload="false" 
@select="beforeUpload"
>
 
	<button 
    type="primary" 
    size="mini" 
    :disabled="percent < 100"> 
        {{ 100 > percent ? percent + "%" : "导入数据" }}
    </button>
 
</uni-file-picker>

data

// 上传----------------------------------------
headers: {
	token: uni.getStorageSync('token'), //获取token(注意仔细看后端接受token的字段名是不是叫做“token”)
},
actionUrl: `${this.$d.API_ROOT_URL}/XXX/XXX`,
fmt: ["xls", "xlsx"],
dur: 100,
percent: 100,
// ----------------------------------------

script 

// 上传文件----------------------------------------------------------------
showFakeLoading() {
	this.interval && clearInterval(this.interval);
	this.percent = 0;
	this.interval = setInterval(() => {
		this.percent++;
		this.percent >= 99 && clearInterval(this.interval);
	}, this.dur);
},
hideFakeLoading() {
	this.interval && clearInterval(this.interval);
	this.percent = 100;
},
//文件上传之前
beforeUpload(e) {
	const filePath = e.tempFilePaths[0];
	const file = e.tempFiles[0];
	//获取图片临时路径
	uni.uploadFile({
		url: this.actionUrl, //【必填】图片上传地址
		filePath, //【必填】（files和filePath选其一）要上传文件资源的路径。
		name: 'file', //【必填】上传名字，注意与后台接收的参数名一致
		header: this.headers, //设置请求头
		//请求成功，后台返回自己服务器上的图片地址
		success: d => {
			d = JSON.parse(d.data)
			// 上传成功了
			if (d.success) {
				let response = d;
				if (response.data && response.data.key) {
					// 下载失败原因的描述文件
					this.$d.customer_downloadImportCustomerExcel({
						key: response.data.key
					}, {
						s: (d) => {
							this.$g.downloadFile(d, `${file.name}-上传失败原因`, '.xls');
							uni.showToast({
								icon: `none`,
								title: `${file.name}-上传失败，请查看失败原因`
							});
							setTimeout(() => {
								this.initList(true); //刷新列表
							}, 1500);
							//console.log('上传失败', response, file, fileList);
						}
					});
				} else if (response.success) {
					// 上传成功了
					uni.showToast({
						icon: `none`,
						title: `“${file.name}”导入成功`
					});
					setTimeout(() => {
						this.initList(true); //刷新列表
					}, 1500);
					//console.log('上传成功', response, file, fileList);
				} else {
					// 其他失败原因
					uni.showToast({
						icon: `none`,
						title: response.msg
					});
					//console.log('上传失败', response, file, fileList);
				}
			} else {
				uni.showToast({
					icon: `none`,
					title: d.msg
				});
			}
		}
	});
},
// ----------------------------------------