上传base64图片到七牛云前端遇到的坑

这个男人      2022-02-10     157

关键词:

介意前端普通引入七牛云SDk上传图片到七牛云需要多个js,所以才有了base64的上传方式,简化操作,(懒。)

七牛云官方文档如下

https://developer.qiniu.com/kodo/kb/1326/how-to-upload-photos-to-seven-niuyun-base64-code  

我们前端理所当然就复制黏贴了。。然后问题就来了

看地址 

var url = "http://upload.qiniu.com/putb64/20264"; //非华东空间需要根据注意事项 1 修改上传域名

  • upload.qiniu.com 上传域名适用于华东空间。华北空间使用 upload-z1.qiniu.com,华南空间使用 upload-z2.qiniu.com,北美空间使用 upload-na0.qiniu.com。
  • var url = "http://upload.qiniu.com/putb64/20264";这里的 20264 是图片没经过 base64 处理的原图字节大小。!!!!!

报错信息之前没有保存 就没得放了

 

 

这是官方base64的demo

http://kb-static.qiniucdn.com/base64-demo.html

查看了源码才恍然大悟。坑啊

var url = "http://up.qiniu.com/putb64/-1";  、、地址得这样。!!! 改为-1   

 

下一篇填vue上传base64图片完整代码(请勿介意代码乱哦)

 

canvas保存图片到七牛云(代码片段)

最近在做一个项目,需要在前端对图片切片并上传到七牛云技术要点canvas.toBlob(blob=>);//可将canvas保存成二进制文件formData.append(‘file‘,blob,‘filename‘);//将二进制文件添加到FormData中ajax.send(formData);//上传数据到后端处理代码实... 查看详情

thinkphp6上传图片七牛云如何上传文件到七牛云对象储存cos

参考技术AThinkPHP6如何上传图片七牛云,如何上传文件到七牛云对象储存cos,总所周知图片是特别消耗网站带宽的,个人网站将图片上传至七牛云才能显著提升网站的响应速度,手把手交大家如何上配置ThinkPHP6上传文件至七牛云.然后我... 查看详情

ueditor上传图片到七牛云存储(formapi,java)

转:http://my.oschina.net/duoduo3369/blog/174655ueditor上传图片到七牛云存储ueditor结合七牛传图片七牛的试炼开发前的准备与注意事项说明Let‘srock与ueditor结合前的准备工作首先从表单开始生成token建立图片空间生成token上传流程集成ueditor... 查看详情

微信小程序上传图片及上传到上传到七牛云(代码片段)

微信小程序图片上传功能包含:上传到七牛云、删除图片、查看图片   1.创建子组件tpupload//wxml文件<viewstyle="padding:10px;"><!--图片上传--><viewclass="weui-uploader"><viewclass="img-vweui-uploader__bd">< 查看详情

web上传图片到七牛云服务器(代码片段)

本文通过javaweb的使用,把要上传的图片通过浏览器上传到服务器上面.`文本仅供参考,可能出现很多不合理;`1创建对应的jsp页面:下面是jsp下面的对应的from表单,上传文件用的那么ImgFiles的属性名称,同样你可以使用其他的,或者... 查看详情

谁用七牛云设置水印成功了

...对于以图片为主的站点,这样可以节省很大带宽。将图片上传到七牛服务器的重点就是获得上传凭证uploadToken,直接把AccessKey和Secret放到客户端太不安全,容易被反编译。所以需要在服务器端根据AccessKey和Secret动态生成一个uploadT... 查看详情

如何将图片上传到七牛云平台?

参考技术A上一篇文章介绍了“如何将图片上传到Cloudinary云平台?”但是由于Cloudinary的服务器在国外,所以上传和读取图片的速度会很慢,不适合用作生产,因此有必要再介绍一下国内广受欢迎的“七牛”云平台。以及分步骤给... 查看详情

springboot上传文件到七牛云

准备工作mavenpom.xml添加七牛云的sdk依赖<dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>7.2.27</version></dependency>配置项七牛云上传 查看详情

go实战|电商平台图片上传到七牛云(代码片段)

...息2.config3.upload完整代码这一章节中我们介绍如何把图片上传到七牛云,并且返回对应图片的url。因为后续我们的创建的商品,更换头像等等都是把我们的图片上传七牛云存储,再返回对应的url的。1.获取配置信息打开... 查看详情

文件流数组上传到七牛云

首先要注册七牛云,申请个空间,获得密钥、等东西,引入官方sdk包,然后再开发文档中找到代码copy进去就可以了。因为非常简单,我就直接弄上代码了。1packagecom.qianmo.foru.bean.request;23importcom.qianmo.core.common.CommonRequest;4importorg.hi... 查看详情

php表单上传图片到七牛云存储并返回地址……求具体流程~有代码更好

...的资料太少了。研究了下API之后,现在已经能实现图片的上传和下载及上传之后的重定向。首先本篇文章实现的功能如下:1.利用表单上传功能,用户可以点击选择文件按钮,选择本地的一个文件,同时设定上传的图片的名称,... 查看详情

vue3+typescript上传文件到七牛云

.../detail/21414BX0Uleafage-ms项目写了很久了,但是一直没有完成上传文件的功能,之前看了几次七牛云的文档,折腾了几次,没有成功,今天下了决心必须解决这个问题就又开始了各种找资料,看文档,看示例,终于搞定了。项目中使... 查看详情

vue上传图片到七牛云实用攻略

参考技术Avue一般采用element 的upload上传图片/文件。首先,设定参数参考Element upload 文档其次,如图所示,重点在于domain和qiniuaddr两个参数!   参考七牛云存储图片域名文档然后 上传一定要先获取到七... 查看详情

七牛云上传图片报400错误的一些小坑

...术A最近遇到的坑,后台返回的token和filename都没有问题,上传图片还是报code400,最后发现是因为后端申请七牛云的时候填写的服务器是华南区而SDK里默认是华东区,导致上传失败。步骤一:先搜索七牛SDK里的zone0(图一)步骤二... 查看详情

小程序上传文件到七牛云

...160;)  ,function()  ) ,第二步:利用upfileAPI上传文件wx.uploadFile(       formData:token:that.data.up_token,//这里是请求头部 查看详情

七牛云文件上传助手(代码片段)

qiniuyun_upload_tools最近写博客发现经常要上传图片到七牛云上去,每次打开网页登录然后上传感觉很慢,windows也没有一个好的上传工具,于是写了这样的一个工具。效果使用方法下载程序包点击下载解压后直接在config.json文件里面... 查看详情

java实现上传网络图片到七牛云存储(代码片段)

...中,给我们返回该图片的地址。代码实现因为七牛云上传图片的时候,传递的是MultipartFile类型,所以我们需要将网络图片utl转换 查看详情

java实现上传网络图片到七牛云存储(代码片段)

...中,给我们返回该图片的地址。代码实现因为七牛云上传图片的时候,传递的是MultipartFile类型,所以我们需要将网络图片utl转换 查看详情