我的第一个网站-七牛云上传图片问题记录

  • 鸽了好久,最近才把我的域名备案好,备案花了差不多半个月;
  • 然后我发现因为我的一些图片都比较大,我的云服务器也才1核2G,别人访问起来很卡很卡,要等好久才能把图片加载好。然后我去问了我的师兄,给了我意见,让我用七牛云来存储图片。
    在这里插入图片描述

到七牛云注册一个账号,然后就直接新建一个空间,这里有一个注意点就是你要把你的空间设置为公开,这样访问比较方便,
在这里插入图片描述
然后就把你的域名放上去,这里没什么要纠结的,不认识的一律默认,然后会看有一个是CNAME配置,这就让你去购买的域名那里,域名解析(我的是阿里云),把记录添加上。这里也会有一个注意点就是
在这里插入图片描述
因为他的A记录跟CNAME记录会冲突,我是直接用笨方法,直接把之前的删掉,先添加CNAME然后再把那两个加上,至于那个主机记录你可以随便填。
在这里插入图片描述
然后你可以在Window下去查看是不是解析好了
这个网站七牛云的查看CNAME成功连接
然后我就遇到我最大的问题就是我无法通过访问我的域名+七牛云的图片链接去获取我的图片,所以我换了下面的为默认
在这里插入图片描述
就是七牛云给你的CNAME记录的网址就行了
这个就是我的网站http://www.houjia-le.top感兴趣的点进去看看🤭
下次见了,88。

el-upload是一个用于上传图片的组件,而七牛云是一种云存储服务。你可以通过将这两者结合使用,实现将图片上传到七牛云的功能。 具体的步骤如下: 1. 首先,你需要从后台获取七牛云的token,这个token将用于上传图片七牛云。你可以通过调用后端提供的接口,传入AccessKey、SecretKey和Bucket等信息来获取token。 2. 在el-upload组件中,你需要配置action属性为https://upload.qiniup.com,这是七牛云存储区域的上传地址。不同的七牛云存储区域可能会有不同的地址,请根据自己使用的七牛云服务器存储区域来确定具体的地址。 3. 配置el-upload组件的其他参数,如class、list-type、file-list等。这些参数可以根据自己的需求进行设置。 4. 在el-upload组件中,你可以监听onChange事件,以便在图片上传完成后执行相应的操作。比如,你可以在该事件中获取返回的图片路径,并将其放入el-upload组件中进行显示。 5. 当图片上传成功后,你可以在el-upload组件中使用on-success事件来回显上传的图片。你需要将回显地址配置为你在七牛云上配置的回显地址,具体地址可以参考七牛云的官方文档。 6. 最后,你可以根据需要配置其他的el-upload组件参数,如before-upload、on-remove等。 总结起来,通过el-upload组件和七牛云的配合,你可以实现在前端上传图片七牛云,并在上传成功后进行回显操作。详情可以参考提供的引用内容中的代码和注意点。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue中el-upload上传图片到七牛的示例代码](https://download.csdn.net/download/weixin_38675465/13977470)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [elementUI el-upload组件直接上传到七牛云(亲测可用)](https://blog.csdn.net/DLGDark/article/details/126763197)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [el-upload上传文件到七牛云](https://blog.csdn.net/qq_42157868/article/details/107286616)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

乐乐小工厂

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

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

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

打赏作者

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

抵扣说明:

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

余额充值