O SDK da Web cross-end Vue3.0 acessa o armazenamento em nuvem do miniaplicativo WeChat, o caminho de upload do arquivo não existe/o arquivo está danificado e não pode ser exibido (resolvido)

Necessidades de organização:

  1. Vue3.0 é necessário como gerenciamento de segundo plano no lado do PC para conectar-se ao cliente do miniaplicativo WeChat
  2. A introdução do Web SDK é necessária para permitir que vue3.0 acesse o ambiente de desenvolvimento em nuvem
  3. É necessário usar o ambiente de nuvem como um servidor online, inserir os arquivos locais carregados pelo vue3.0 no armazenamento em nuvem por meio do ambiente de nuvem e gerar o caminho de acesso rápido da nuvem e o caminho http/https (caminho da rede pública) para o arquivos na nuvem.

Etapas de implementação:

Primeiro passo

Modifique o código de permissão de armazenamento em nuvem:

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

Passo 2

Implemente a introdução do Web SDK no vue3.0:

O componente vue faz referência e inicializa o ambiente de nuvem:

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

    }

Embora o backend do vue3.0 inclua problemas entre domínios após o upload, isso não afeta a capacidade da nossa nuvem de gerar endereços de rede para arquivos/imagens carregados. Como mostrado na imagem:

Acho que você gosta

Origin blog.csdn.net/lbcyllqj/article/details/133491490
Recomendado
Clasificación