Vue3.0跨端Web SDK访问微信小程序云储存,文件上传路径不存在/文件受损无法显示问题(已解决)

整理需求:

  1. 需要vue3.0作为pc端的后台管理来连接微信小程序客户端
  2. 需要Web SDK的引入,实现vue3.0接入云开发环境
  3. 需要以云环境作为线上服务器,将vue3.0上传的本地文件通过云环境进入云储存,并将文件在云端生成云端快捷访问路径及http/https路径(公网路径)

实现步骤:

第一步

修改云端储存的权限代码:

复制代码
{
  "read": true,
  "write": true
}

第二步

在vue3.0实现Web SDK引入:

vue组件引用且初始化云端环境:

javascript 复制代码
<input type="file" ref="fileInput" @change="onFileChange" />
created() {
        this.GongGao_GuanLi()
    },
    methods: {
        async wxXCX() {
            // 声明新的 cloud 实例
            var c1 = new this.cloud.Cloud({
                // 必填,表示是未登录模式
                identityless: true,
                // 资源方 AppID 填自己的
                resourceAppid: '',
                // 资源方环境 ID	填自己的
                resourceEnv: '',
            })
            //初始化
            await c1.init()
            //初始化执行完再调用
            // 完成后正常使用资源方的s已授权的云资源
            return c1;

        },
        // 上传本地图片
        onFileChange(e) {
            // const file = e.target.files[0];
            this.selectedFile = e.target.files[0];
            // console.log(file.name);
            // this.Image_name = file.name
        },
        async ok() {
            const c1 = await this.wxXCX();
            const fileBits = [this.selectedFile];
            const fileName = this.selectedFile.name;
            const file = new File(fileBits, fileName);
            c1.uploadFile({
                config: {
                  // 资源方环境 ID	填自己的
                    env: ''
                },
                
                file:file ,
                cloudPath:"JOB/" + Date.now() + "_" + fileName,
                success(res){
                    console.log(res.fileID);
                }
            });
        }

    }

上传之后虽然vue3.0的后台会包跨域问题,但是这个是不影响我们云端对上传的文件/图片进行生成网络地址的。如图:

相关推荐
鱼樱前端23 分钟前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig1 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少1 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder1 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix1 小时前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句1 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易1 小时前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟2 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子2 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao2 小时前
网安-XSS-pikachu
前端·安全·网络安全