Vue3.0 クロスエンド Web SDK が WeChat アプレット クラウド ストレージにアクセスします。ファイルのアップロード パスが存在しません/ファイルが破損しているため表示できません (解決済み)

ニーズの整理:

1. WeChatアプレットクライアントに接続するにはPC側のバックグラウンド管理としてVue3.0が必要です
2. vue3.0からクラウド開発環境にアクセスするにはWeb SDKの導入が必要です
3. クラウド環境をオンラインサーバーとして利用し、vue3.0でアップロードしたローカルファイルをクラウド環境経由でクラウドストレージに投入し、クラウドクイックアクセスパスとhttp/httpsパス(パブリックネットワークパス)を生成する必要があります。クラウド上のファイル。

実装手順:

最初の一歩

クラウドストレージの権限コードを変更します。

{
  "read": true,
  "write": true
}

ステップ2

vue3.0 で Web SDK の導入を実装します。

vue コンポーネントはクラウド環境を参照して初期化します。

<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 のバックエンドにはアップロード後にクロスドメインの問題が含まれますが、アップロードされたファイル/画像のネットワーク アドレスを生成するクラウドの機能には影響しません。図に示すように: