vue-pc upload optimization-uni-app upload optimization

vue-pc upload optimization

• When we use our own document server to upload pictures, there is no problem locally, but uploading online will be slower

• At this time, our easiest way is to write a loading component, open the component before uploading, and close the component after dropping the interface

• Or if you don’t want to write, directly use element loading to write a mask layer to load, and control the opening and closing when adjusting the interface

1. Write the component method yourself

2. Use element-loading to load the component mask layer

 //开启遮罩层
      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-upload optimization

• When we use the uni-file-picker-upload of uni-app, it may cooperate with the document server built by ourselves (free)

• But when we do not use the upload space of uni-app, the upload failure hook will not be executed, which makes it difficult for us to operate.

• Especially after the release, the upload may not be successful (it takes time to respond), and the applet loads the temporary path to the uni-file-picker-component and displays it. At this time, the api has not been called successfully (the Apple real machine is more obvious)

• This is why we can only add a mask layer to tell the user that I am uploading and not to operate, so as to avoid misoperation and cause the data to be inaccurate

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

---

Summarize:

After this process, I believe you also have a preliminary deep impression on vue-pc upload optimization-uni-app upload optimization, but the situation we encounter in actual development is definitely different, so we need to understand its meaning The principle remains the same. Come on, hit the workers!

Please point out any deficiencies, thank you -- Fengguowuhen