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

vue-pc上传优化

• 当我们使用自己搭建的文档服务器上传图片时候，在本地没问题，上线上传会比较慢

• 这时候我们最简单的方法就是写一个加载组件，上传之前打开组件，掉完接口关闭组件

• 或者不想写直接使用element的loading写一个遮罩层加载，调接口时控制开启关闭

1.自己写组件方法

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

 //开启遮罩层
      let loadingInstance = Loading.service({
        lock: true, //lock的修改符--默认是false
        text: "正在上传背景图，请耐心等待", //显示在加载图标下方的加载文案
        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上传优化 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕