Necessidades de organização:
- Vue3.0 é necessário como gerenciamento de segundo plano no lado do PC para conectar-se ao cliente do miniaplicativo WeChat
- A introdução do Web SDK é necessária para permitir que vue3.0 acesse o ambiente de desenvolvimento em nuvem
- É 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: