微信小程序---单张图片上传到七牛

朴灿烈づ我的快乐病毒、 2022-03-09 15:08 286阅读 0赞

单张图上传`到七牛：`

const qiniuUploader = require("../../../utils/qiniuUploader"); // 路径要自己搞定
    
    Page({
      didPressChooseImage: function() {
        var that = this;
        // 选择图片
        wx.chooseImage({
          count: 1,
          success: function (res) {
            var filePath = res.tempFilePaths[0];
            // 交给七牛上传
            qiniuUploader.upload(filePath, (res) => {
              // 每个文件上传成功后,处理相关的事情
              // 其中 info 是文件上传成功后，服务端返回的json，形式如
              // {
              //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
              //    "key": "gogopher.jpg"
              //  }
              // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
              that.setData({
                'imageURL': res.imageURL,
              });
            }, (error) => {
              console.log('error: ' + error);
            }, {
              uploadURL: 'https://up.qbox.me',
              domain: 'bzkdlkaf.bkt.clouddn.com', // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
              key: 'customFileName.jpg', // 自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
              // 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
              uptoken: 'xxxxxxxxUpToken', // 由其他程序生成七牛 uptoken
              uptokenURL: 'UpTokenURL.com/uptoken', // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "0MLvWPnyy..."}
              uptokenFunc: function() {return 'zxxxzaqdf';}
            });
          }
        })
      }
    });
    
    // domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取
    // key：通过微信小程序 Api 获得的图片文件的 URL 已经是处理过的临时地址，可以作为唯一文件 key 来使用。

上面代码初始化七牛更多相关参数：

*  **imageArray：**准备上传的图片临时地址数组。
 *  **fileHead：**自定义上传七牛文件名的头，为了区别上传文件，比如图片/视频/录音/其他，
 *  **imgName：**自定义上传七牛文件名，前端处理嘛，我就简单的通过截取临时路径（filePath ）的30-50位字符作为储存到七牛的文件名，即使你添加了两张相同的图片，小程序给你的临时路径也是不一样的，所以不会存在重名情况。
 *  **domain：**下载资源时用到。如果设置，在上传后的success里返回的res.ImageURL字段,是一个带http的直接可以访问的文件地址，否则需要自己拼接。
 *  **key：**最终储存到七牛的文件名，我这里的图片文件名=文件头(fileHead)+伪文件名(imgName)
 *  **uploadURL：**上传到七牛的那个存储区域，上传区域和上传区域代码一定要对应上。
 *  region：上传区域代码。
 *  **shouldUseQiniuFileName:**表示是否由七牛来定义上传文件名，如果是 true，则文件 key 由 qiniu 服务器分配 (全局去重)。默认是 false，也就是我们自己来定义。如果key设置了，优先级最高

切记：小程序后台配置上传地址白名单（对应你选的存储区域，例如华北区，https://up-z1.qbox.me）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwNTQ4Njk_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwNTQ4Njk_size_16_color_FFFFFF_t_70]: /images/20220309/ba6572fd203f480d830d7d75d4c36f3e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，286人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序如何上传图片

微信小程序上传图片的方法很简单，你可以使用微信小程序的API来实现，具体步骤如下：1. 首先，在小程序的页面中，使用![Image 1][]标签来引用图片；2. 然后，在小程序

素颜马尾好姑娘i/ 2024年03月25日 04:21/ 0 赞/ 12 阅读

相关微信小程序实现上传多张图片，删除图片

最近在做微信小程序，遇到上传多张图片到服务器，计算上传图片的张数，并且可以手动删除图片，下面是效果图效果图： ![20200609145904640.png][] 本

Bertha 。/ 2023年02月16日 09:25/ 0 赞/ 93 阅读

相关微信小程序上传图片、视频到七牛云存储

我们采用的是js上传的方式，直接将文件上传到七牛云，并且上传之后，七牛云会返回文件名称和文件全路径。思路： 1：配置七牛云上传所需信息，包括七牛云存储空间绑定的加速域名，

Love The Way You Lie/ 2022年12月23日 15:28/ 0 赞/ 252 阅读

相关微信小程序上传图片/文件

微信官方文档有提供上传文件方法： wx.chooseMessageFile(Object object) > 基础库 2.5.0 开始支持，低版本需做[兼容处理]

水深无声/ 2022年12月18日 11:53/ 0 赞/ 163 阅读

相关服务器怎么接收多张微信小程序上传的图片,微信小程序实现同时上传多张图片...

本文实例为大家分享了微信小程序实现同时上传多张图片的具体代码，供大家参考，具体内容如下 1.图片选择后，路径已经存入list中： data: \{ images: \[\

男娘i/ 2022年09月03日 14:14/ 0 赞/ 127 阅读

相关微信小程序---单张图片上传到七牛

单张图上传`到七牛：` const qiniuUploader = require("../../../utils/qiniuUploader"); // 路径要自己

朴灿烈づ我的快乐病毒、/ 2022年03月09日 15:08/ 0 赞/ 287 阅读

相关微信小程序---多图上传到七牛，并从七牛传到服务器（多图上传和重命名）

实现本地图片上传--->七牛---->服务器 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

ゝ一世哀愁。/ 2022年03月09日 12:56/ 0 赞/ 663 阅读

相关微信小程序上传图片

//添加图片 joinPicture: function (e) { var index = e.currentTarget.dataset

痛定思痛。/ 2021年09月17日 03:02/ 0 赞/ 548 阅读

相关微信小程序实现多张图片上传

//app.js uploadimg(data) { var that = this, i = data.i ? data.i

た入场券/ 2021年07月24日 23:15/ 0 赞/ 488 阅读

相关微信小程序单张本地图片上传，拍摄图片上传

wxml <button bindtap="upimg" class='jia_img' >上传</button> <image src="{

阳光穿透心脏的1/2处/ 2021年07月24日 17:20/ 0 赞/ 547 阅读