vue 中的 const {XXX } =this 的含义

一个容易忘的知识点,我们看下面例子就清楚了:

例子

例1:

const { xxx } = this.state;

上面的写法是es6的写法,其实就相当于:

const xxx = this.state.xxx

例2:

 const { ctx,app,service } = this

上面的这句话是一个简写,最终的含义相当于

const  ctx= this.ctx
const  app= this.app
const  service = this.service 
  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue,要显示存储在数据库的图片,可以通过以下步骤实现: 1. 在Vue组件,使用`<img>`标签来显示图片: ``` <template> <div> <img :src="imageURL" /> </div> </template> ``` 2. 在Vue组件的`data`定义一个变量来保存图片的URL: ``` <script> export default { data() { return { imageURL: '' } }, mounted() { // 在组件挂载完成后,从数据库获取图片的URL // 假设获取的URL保存在变量imageURL this.imageURL = 'https://xxxxx.com/xxx.jpg'; } } </script> ``` 3. 在后端API,将存储在数据库的图片转换为URL,并返回给前端。 具体实现方式因后端语言和框架而异,下面以Node.js和Express框架为例: ``` const express = require('express'); const app = express(); const path = require('path'); const fs = require('fs'); const multer = require('multer'); // 存储图片的文件夹 const uploadDir = path.join(__dirname, 'uploads'); // 配置multer间件 const upload = multer({ dest: uploadDir }); // 定义API路由 app.post('/api/upload', upload.single('image'), (req, res) => { // 获取上传的图片文件 const file = req.file; // 将图片文件重命名为随机字符串,防止重名 const newFilename = Math.random().toString(36).substring(2, 15) + file.originalname.substring(file.originalname.lastIndexOf('.')); // 将图片文件从临时目录移动到存储文件夹 fs.renameSync(file.path, path.join(uploadDir, newFilename)); // 构造图片URL并返回给前端 const imageURL = 'https://xxxxx.com/uploads/' + newFilename; res.json({ imageURL }); }); ``` 以上代码实现了一个上传图片的API,将上传的图片保存到服务器上的`uploads`文件夹,并返回图片的URL给前端。在Vue组件,通过访问这个API来获取图片URL,并将其赋值给`imageURL`变量,就可以在页面上显示图片了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

呆萌宝儿姐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值