el-upload 图片上传组件

• 方法 1:使用 action 后端提供的图片上传接口 （action 地址、on-success 成功回调）
• 方法 2:使用 http-request 覆盖默认的 action 上传
• 资源对象转 base64 编码

function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}

步骤

图片上传接口如何调用，是后端接口来决定的

安装

文档

• npm install leancloud-storage --save

main.js 中初始化 SDK

• (让 SDK 知道应该向哪个空间上传图片)

AV 敏捷访问
AV.init({
  appId: "自己的 ID",
  appKey: "自己的 Key",
  serverURL: "自己的域名"
});

使用

文档

• （将本地资源转化为 LeanCloud 资源）

handleUpload(info) {
  console.log(info);
  // 将本地文件资源对象，转换为base64的编码
  getBase64(info.file, (base64) => {
    const data = { base64 };
    const file = new Cloud.File("vue-admin-2301.png", data); //将base64的编码，构建为LeanCloud资源对象
    //上传图片并获取后端下发的图片链接
    file.save().then((res) => {
      console.log(res);
      this.imageUrl = res.attributes.url; //展示预览图
    });
  });
},

将图片链接存到数据库

• 使用 组件 v-model 的知识点
• ImgUpload 组件调用时绑定 v-model:poster="ruleForm.poster"
• ImgUpload 组件内触发$emits

cloudFile.save().then((res) => {
  console.log(res);
  let { url } = res.attributes;
  this.imageUrl = url;
  this.$emit("update:poster", url); //将后端给的图片链接传给父组件
});