当前位置：首页 > news >正文

vue-pc上传优化-uni-app上传优化

news 2025/8/23 20:56:15

vue-pc上传优化

当我们使用自己搭建的文档服务器上传图片时候，在本地没问题，上线上传会比较慢
这时候我们最简单的方法就是写一个加载组件，上传之前打开组件，掉完接口关闭组件
或者不想写直接使用element的loading写一个遮罩层加载，调接口时控制开启关闭

1.自己写组件方法

2.使用element-loading加载组件遮罩层

 //开启遮罩层let loadingInstance = Loading.service({lock: true, //lock的修改符--默认是falsetext: "正在上传背景图，请耐心等待", //显示在加载图标下方的加载文案spinner: "el-icon-loading", //自定义加载图标类名background: "rgba(0, 0, 0, 0.7)", //遮罩层颜色target: document.querySelector("#futureTransferDialog"), //loadin覆盖的dom元素节点});// 上传文档服务器-调用接口// 接口调用成功-赋值信息//关闭遮罩层loadingInstance.close();

uni-app-上传优化

当我们使用uni-app的uni-file-picker-上传时，可能配合的是自己搭建的文档服务器（免费的）
但我们没有使用uni-app的上传空间时候，上传失败钩子是不会执行，导致我们不好操作。
特别是发布之后，可能还没有上传成功（需要时间响应），小程序就把临时路径加载到uni-file-picker-组件显示了。这时候api还没有调用成功（苹果真机比较明显）
这是我们只能加一个遮罩层，告诉用户我在上传，不要操作，避免误操作造成数据确实

async select(e) {// 获取到文件对象时，开启加载遮罩层// 开启遮罩层-开始上传-响应需要时间-提示用户等待-防止用户误操作this.$modal.loading("上传图片中...")console.log('选择文件：', e)const tempFilePaths = e.tempFilePaths[0];
uni.uploadFile({url: 'https://api.thgykj.com/admin-api/upload/file',filePath: tempFilePaths,name: 'multipartFile',header: {"Authorization":getAccessToken(),},success: (res) => {console.log('上传成功', res.data);console.log('上传数据转换', JSON.parse(res.data));// 取到文档服务器的值let uploaddata = JSON.parse(res.data)if (uploaddata) {// 有值-上传成功-加载需要时间-赋值完数据-提示用户-关闭遮罩层toast('巡检图片添加成功')this.$modal.closeLoading()} else {//没值-上传失败超时-提示用户-关闭遮罩层this.$modal.closeLoading()toast('巡检图片添加失败，请重新添加')}},fail: error => {console.log(error);}})},

总结：

经过这一趟流程下来相信你也对 vue-pc上传优化-uni-app上传优化有了初步的深刻印象，但在实际开发中我们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！