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 }); } } }); }, // ----------------------------------------