微信小程序上传文件(图片)到阿里云OSS

最新推荐文章于 2024-03-13 12:38:28 发布

sxs7970

最新推荐文章于 2024-03-13 12:38:28 发布

阅读量5.1k

点赞数 3

分类专栏：前端微信小程序文章标签：小程序 javascript

本文链接：https://blog.csdn.net/sxs7970/article/details/105348652

版权

前端同时被 2 个专栏收录

132 篇文章 2 订阅

订阅专栏

微信小程序

25 篇文章 1 订阅

订阅专栏

官网也有相应的步骤点击，登录oss控制后台，有新老版本。

直接下载所有文件

直接可用：

这个目录随便取名。

config.js配置

var fileHost = "https://xxxx.com/";//你自己阿里云oss地址，【一定要在小程序后台开发的uploadFile合法域名白名单中需要配置一下】
var config = {
  //aliyun OSS config
  uploadImageUrl: `${fileHost}`,
  AccessKeySecret: 'xxx',//登录阿里云控制台查看AccessKeySecret
  OSSAccessKeyId: 'xxx',//登录阿里云控制台查看OSSAccessKeyId
  timeout: 87600,//这个是上传文件时Policy的失效时间
};
module.exports = config

uploadFile.js

这个文件里是封装的上传文件的功能。

在index.html中使用

<view class="userinfo" bindtap="uploadImg">
    上传图片
  </view>

直接从github下载所有文件，放到你的项目中修改一下配置就可以使用

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sxs7970

关注关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

王佳斌

08-16

5031

微信小程序，vue2，vue3，阿里云oss，小程序阿里云oss上传文件，直接将文件上传到阿里云OSS，不经过后端，纯前端直传，不用后端可以直接在前端上传吗，阿里云oss上传，配置教程，阿里云oss配置，摄像头拍照或相册选取上传到阿里云，前端阿里云oss上传文件，office文档文件word文档/excel电子表格/ppt演示文稿、pdf文档/doc/ppt/xls/txt/mp3/mp4，上传文件图片视频等资源到OSS，上传报错，签名错误，阿里云错误，解决这个问题，上传很慢，一直签名失败，权限，详细教程，

微信小程序上传图片到阿里云oss

08-08

微信小程序上传文件到阿里云oss存储，改下配置就可以用了

3 条评论您还未登录，请先登录后发表或查看评论

微信小程序上传图片到阿里云oss（纯前端）

weixin_43637720的博客

01-12

3745

根据业务需要还需要做小程序端上传，故而也记录一下。

微信小程序开发：上传网络图片到阿里云oss

热门推荐

delebasou的博客

12-25

1万+

微信小程序上传图片到阿里云oss 最近开发微信小程序要求上传图片到阿里云oss上，所以就顺手整理一下整个过程啦。前提开通oss服务和创建oss存储空间啦（这个就自己去解决吧）下面接入正题：步骤一：配置 Bucket 跨域客户端进行表单直传到 OSS 时，会从浏览器向 OSS 发送带有 Origin 的请求消息。OSS 对带有 Origin 头的请求消息会进行跨域规则（CORS）的验证。因此......

微信小程序本地上传图片到阿里云oss例子

qq_35181466的博客

03-02

504

微信小程序本地上传图片到阿里云oss例子

微信小程序阿里云OSS-sdk

08-16

阿里云OSS-sdk，大小536KB 微信小程序纯前端从阿里云OSS下载，可直接引用文章地址：https://blog.csdn.net/qq_44695727/article/details/132154404

微信小程序上传文件到阿里OSS教程

01-03

这里我们要在小程序后台配置上传域名（上面的域名是我自己的申请的，后台配置的是公司的的域名，使用的时候你们用一套东西即可）。下图是bucket管理，这里可以新建文件的保存路径，域名管理。（三）服务端签名直...

阿里云oss小程序文件上传

04-01

阿里云的oss上传，后台接收小程序图片上传，并返回到前端的类库

小程序上传文件到OSS

HuaiXiaoAi的博客

04-20

711

这里要小心啊 oss的包巨大。记得把他分出来不然你主包直接爆炸了。这里我是用的uniapp写的微信小程序。给一个按钮点击上传图片。

小程序上传文件到阿里云oss对象存储中代码包

04-27

这份文件是打包好的代码文件，下载后移植到自己的小程序里只需要配置三个参数就能够使用，可以查看我这篇博文如何使用：https://blog.csdn.net/weixin_42292991/article/details/89609078,使用起来十分简单

【微信小程序】上传文件到阿里云OSS

IVanLyf的博客

07-10

3146

小程序上传文件到OSS也是利用OSS提供的PostObject接口来实现表单文件上传到OSS 步骤1：配置Bucket跨域访问客户端进行表单直传到OSS时，会从浏览器向OSS发送带有Origin的请求消息。OSS对带有Origin头的请求消息会进行跨域规则（CORS）的验证。因此需要为Bucket设置跨域规则以支持Post方法。登录OSS管理控制台。单击Bucket列表，之后单击目标Bucket名称。单击权限管理 > 跨域设置，在跨域设置区域单击设置。单击创建规则，配置如下图所示步骤

微信小程序文件直接上传阿里云OSS

hollebug的博客

05-24

5630

第一步配置Bucket跨域访问第二步 微信小程序配置域名白名单以上两步，请参考阿里云官网，如何在微信小程序环境下将文件上传到OSS_对象存储 OSS-阿里云https://help.aliyun.com/document_detail/92883.html 然后创建uploadOssHelper.js, 复制官网js内容，注意引入的crypto-js，自行安装 const crypto = require("crypto-js"); class MpUploadOssHelper {

用PHP框架实现微信小程序向阿里云上传图片

zhmoon的博客

08-04

205

微信小程序端： onChangeTap:function(e){ let Imgs = e.detail.current; let token = wx.getStorageSync('token'); wx.uploadFile({ filePath: Imgs[0], name: 'file', url: 'http://www.week3.com/index.php/api/upimg', header

获取微信小程序码，并上传到阿里云

earthhour的专栏

07-07

724

先获取小程序码二进制流 /** * 获取小程序码 */ public static InputStream getWxacodeUnlimit(String accessToken, String path, int width) { String url = String.format(WXACODE_UNLIMIT_URL, accessToken); String[] str = path.split("[?]"); .

微信小程序访问阿里云oss存储资源的方法

ljflemon的博客

07-27

1万+

前言我们团队的小项目有小视频的上传和浏览的业务场景，一开始我们将视频的上传和浏览都跑在我们1核2G1M的小水管服务器上，整个流程是通的，但就是卡的让人怀疑人生。所以我们考虑将视频上传到阿里云oss服务器上，提升一下访问速度。后面还遇到一些小问题，全部解决之后特意记录总结一下。注册阿里云账号，开通oss服务这个就不多说了，目前这种大厂的saas的模式真的是很方便，极大降低了个人和小公司的...

微信小程序图片缓存策略

code

09-01

5324

昨天，后端给我提了一个问题：他更换了CDN上的图片，但是他打开小程序来看，还是旧图片，他尝试过删除小程序，重新进，还是旧图片。我第一反应是：“你有没有清CDN缓存？“ 他说：”我在阿里云CDN控制台刷新缓存了，都两三天了，还是旧图片。”（后来我看过刷缓存记录，一天前刚刷的，他夸张了。。。）我说：“那不应该呀，CDN刷新缓存，5分钟就生效了。” 当即拿出我的手机，进小程序看了一下，是新的图片。他赶紧拿出他的手机给我看，果然，不管试多少次，都是旧图片。我说：”你这个图片是文件名没改，请求地址

对象存储OSS（微信小程序直传实践）

weixin_54067793的博客

06-16

3415

对象存储OSS（微信小程序直传实践）云函数 Promise

微信小程序，图片上传阿里云oss。写一个例子

05-27

好的，以下是一个简单的微信小程序中图片上传到阿里云OSS的例子： 1. 在微信小程序中，使用wx.chooseImage()方法选择需要上传的图片，并将其保存在本地变量tempFilePaths中。 ``` wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths; // 上传图片到阿里云OSS uploadImage(tempFilePaths[0]); } }) ``` 2. 编写上传图片的函数uploadImage()，其中需要设置header、formData、name、url等参数，并调用wx.uploadFile()方法上传图片。 ``` function uploadImage(filePath) { // 阿里云OSS的Bucket名称和上传文件夹名称 var bucketName = 'your-bucket-name'; var folderName = 'your-folder-name/'; // 生成上传文件的唯一key var timestamp = new Date().getTime(); var key = folderName + timestamp + '-' + Math.floor(Math.random() * 10000) + '.jpg'; // 生成OSS的上传接口地址 var policyBase64 = 'your-policy-base64'; var signature = 'your-signature'; var aliyunUrl = 'https://' + bucketName + '.oss-cn-hangzhou.aliyuncs.com'; // 设置header和formData var header = { 'content-type': 'multipart/form-data' }; var formData = { 'key': key, 'policy': policyBase64, 'OSSAccessKeyId': 'your-access-key-id', 'success_action_status': '200', 'signature': signature }; // 调用wx.uploadFile()方法上传图片 wx.uploadFile({ url: aliyunUrl, filePath: filePath, name: 'file', header: header, formData: formData, success: function(res) { // 上传成功，获取图片URL地址 var imageUrl = aliyunUrl + '/' + key; console.log('上传成功，图片URL地址为：' + imageUrl); }, fail: function(res) { // 上传失败 console.log('上传失败：' + res.errMsg); } }) } ``` 需要注意的是，以上代码仅为一个示例，实际使用时需要按照阿里云OSS的规定进行设置，并在后端服务中编写相应的签名验证逻辑。