正文

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

lude1994  lude1994  2022-11-29  532

关键词：

微信小程序图片上传功能包含：上传到七牛云、删除图片、查看图片

1.创建子组件tpupload

// wxml文件

<view style="padding: 10px;">
   <!-- 图片上传 -->
  <view class="weui-uploader">
    <view class="img-v weui-uploader__bd">
      <view class=\'pic\' wx:for="imgs" wx:for-item="item" wx:key="*this">
          <image class=\'weui-uploader__img \'
                  src="item"
                  data-index="index" mode="aspectFill" bindtap="previewImg">
                    <icon type=\'cancel\' class="delete-btn" data-index="index" catchtap="deleteImg"></icon>
          </image>
      </view>
      </view>
    </view>
      
      

  <!-- 用来提示用户上传图片 -->
  <view class="weui-uploader__input-box pic addimage" bindtap="uploadImages"  wx:if="imgs.length <= 9"> 
    <image src="/images/upload.png" style="width: 120rpx; height: 120rpx"></image>
  </view>


</view>

//json文件


  "component": true,
  "usingComponents":

// js文件

// components/tpupload/tpupload.js
const app = getApp()
Component(
  /**
   * 组件的属性列表
   */
  properties: 
    uploadDesc:String,
    tpKey:String,
    tpNum:Number,
    imgs:Array,
  ,

  /**
   * 组件的初始数据
   */
  data: 
    imgs:[]
  ,
  lifetimes: 
    attached: function() 
    ,
    detached: function() 
      // 在组件实例被从页面节点树移除时执行
    ,
  ,
  pageLifetimes: 
    show()
    
  ,
  /**
   * 组件的方法列表
   */
  methods: 
    
  // 删除图片
  deleteImg(e) 
    var imgs = this.data.imgs;
    var that = this;
    var index = e.currentTarget.dataset.index;
    imgs.splice(index, 1);
    that.setData(
      imgs: imgs
    );
    that.triggerEvent(\'tpupload\',
      imgs:imgs
    )
  ,

  // 预览图片
  previewImg(e) 
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;
    //所有图片
    var imgs = this.data.imgs;
    wx.previewImage(
      //当前显示图片
      current: imgs[index],
      //所有图片
      urls: imgs
    )
  ,
  // 上传图片-多张
  uploadImages() 
    var that = this;
    var imgs = that.data.imgs;
    wx.chooseImage(
      // count: 1, // 默认9
      sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) 
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        if(imgs.length + tempFilePaths.length > that.data.tpNum)
          wx.showToast(
            icon:\'error\',
            title:"上传不能超过"+that.data.tpNum+"张"
          )
          return
        
        for (var i = 0; i < tempFilePaths.length; i++) 
            imgs.push(tempFilePaths[i]);
        
        that.triggerEvent(\'tpupload\',
          imgs:imgs
        )
        that.setData(
          imgs: imgs
        );
      
    );
  ,
  
)

// wxss

/* pages/component/uplaodimages/index.wxss */
.icon 
  width: 20px;

.addimage 
  /* padding: 10px; */
  /* border: 1px solid #ddd;
  border-radius: 10px;
  width: 100rpx;
  height: 100rpx; */
  

 
.pic 
  float: left;
  position: relative;
  margin-right: 9px;
  margin-bottom: 9px;
  width: 120rpx;
  height: 120rpx;
  border-radius: 6px;
  overflow: hidden;
  
  .pic image 
    width: 100%;
    height: 100%;
  
   
  .delete-btn
    position: absolute;
    top: 0;
    right: 0;
  
  .maincenter 
    justify-content: center;
    position: fixed;
    bottom: 10px;
    left: 0;
    right: 0;

   
  .weui-uploader
    padding: 10rpx;

2.七牛云图片上传函数封装

import qiniuUploader from "../static/lib/qiniuUploader"; // 引入七牛云官方的js，若出现下载的有问题，可以试试我的，放在最底部了

function uploadFile(imgArr, callback)
  let promisevariable = new Promise(function (resolve, reject) 
    qiniuUploader.upload(
      imgArr, //上传的图片
      (res) =>   //回调 success
        console.log(res, \'七牛云返回\')
        resolve(res.imageURL)
      , (error) =>  //回调 fail
        reject(\'error\');
      ,
       // 参数设置  地区代码 token domain 和直传的链接 注意七牛四个不同地域的链接不一样，我使用的是华南地区
        region: \'z2\',
        uptokenURL: getApp().globalData.host+\'/xxxx\',
        uploadURL: \'https://cdn.xxx.com\',
        domain: \'https://cdn.xxx.com\',
      )
  )
  return promisevariable;

3.父组件使用子组件

// json文件中引入子组件

"tpupload": "/component/tpupload/tpupload",

//wxml文件中引入子组件

<tpupload bind:tpupload="tpupload" imgs="imgs" tpNum=\'9\' ></tpupload>

// 发布规则，先上传图片到七牛云，再将七牛云返回的图片地址一起将参数传给后台

  // 发布
  publish(e) 
   if(this.data.imgs.length <= 0) 
      reFun.toastBox(\'error\', \'请上传至少1张图片\')
      return;
   
  　var obj = ; // 用来传给后台的参数var arr = []; // 
    for(let i = 0; i < this.data.imgs.length; i++) 
      var promiseFun = reFun.uploadFile(this.data.imgs[i]) // 将promise封装的函数进行赋给变量
      arr.push(promiseFun)
    
    Promise
        .all(arr) // arr是通过循环遍历而来的函数数组，all是一起执行数组里所有的函数
        .then(function(results) // results返回的是处理所有函数返回 的结果
      　　　　
      　　　obj.imgs = results; // 将图片放进obj里，再传给后台
            uriFun.saveSecondShop(this, obj)
      
        );

  ,

// 如果下载的七牛云js有问题，可以试试

(function () 

    var config = 
      qiniuRegion: \'\',
      qiniuImageURLPrefix: \'\',
      qiniuUploadToken: \'\',
      qiniuUploadTokenURL: \'\',
      qiniuUploadTokenFunction: null,
      qiniuShouldUseQiniuFileName: false
    
  
    module.exports = 
      init: init,
      upload: upload,
    
  
    // 在整个程序生命周期中，只需要 init 一次即可
    // 如果需要变更参数，再调用 init 即可
    function init(options) 
      config = 
        qiniuRegion: \'\',
        qiniuImageURLPrefix: \'\',
        qiniuUploadToken: \'\',
        qiniuUploadTokenURL: \'\',
        qiniuUploadTokenFunction: null,
        qiniuShouldUseQiniuFileName: false
      ;
      updateConfigWithOptions(options);
    
  
    function updateConfigWithOptions(options) 
      if (options.region) 
        config.qiniuRegion = options.region;
       else 
        console.error(\'qiniu uploader need your bucket region\');
      
      if (options.uptoken) 
        config.qiniuUploadToken = options.uptoken;
       else if (options.uptokenURL) 
        config.qiniuUploadTokenURL = options.uptokenURL;
       else if (options.uptokenFunc) 
        config.qiniuUploadTokenFunction = options.uptokenFunc;
      
      if (options.domain) 
        config.qiniuImageURLPrefix = options.domain;
      
      config.qiniuShouldUseQiniuFileName = options.shouldUseQiniuFileName
    
  
    function upload(filePath, success, fail, options, progress, cancelTask, before, complete) 
      if (null == filePath) 
        console.error(\'qiniu uploader need filePath to upload\');
        return;
      
      if (options) 
        updateConfigWithOptions(options);
      
      if (config.qiniuUploadToken) 
        doUpload(filePath, success, fail, options, progress, cancelTask, before, complete);
       else if (config.qiniuUploadTokenURL) 
        getQiniuToken(function () 
          doUpload(filePath, success, fail, options, progress, cancelTask, before, complete);
        );
       else if (config.qiniuUploadTokenFunction) 
        config.qiniuUploadToken = config.qiniuUploadTokenFunction();
        if (null == config.qiniuUploadToken && config.qiniuUploadToken.length > 0) 
          console.error(\'qiniu UploadTokenFunction result is null, please check the return value\');
          return
        
        doUpload(filePath, success, fail, options, progress, cancelTask, before, complete);
       else 
        console.error(\'qiniu uploader need one of [uptoken, uptokenURL, uptokenFunc]\');
        return;
      
    
  
    function doUpload(filePath, success, fail, options, progress, cancelTask, before, complete) 
      if (null == config.qiniuUploadToken && config.qiniuUploadToken.length > 0) 
        console.error(\'qiniu UploadToken is null, please check the init config or networking\');
        return
      
      var url = uploadURLFromRegionCode(config.qiniuRegion);
      var fileName = filePath.split(\'//\')[1];
      if (options && options.key) 
        fileName = options.key;
      
      var formData = 
        \'token\': config.qiniuUploadToken
      ;
      if (!config.qiniuShouldUseQiniuFileName) 
        formData[\'key\'] = fileName
      
      before && before();
      var uploadTask = wx.uploadFile(
        url: url,
        filePath: filePath,
        name: \'file\',
        formData: formData,
        success: function (res) 
          var dataString = res.data
          //   // this if case is a compatibility with wechat server returned a charcode, but was fixed
          //   if(res.data.hasOwnProperty(\'type\') && res.data.type === \'Buffer\')
          //     dataString = String.fromCharCode.apply(null, res.data.data)
          //   
          try 
            var dataObject = JSON.parse(dataString);
            //do something
            var fileUrl = config.qiniuImageURLPrefix + \'/\' + dataObject.key;
            dataObject.fileUrl = fileUrl
            dataObject.imageURL = fileUrl;
            // console.log(dataObject);
            if (success) 
              success(dataObject);
            
           catch (e) 
            console.log(\'parse JSON failed, origin String is: \' + dataString)
            if (fail) 
              fail(e);
            
          
        ,
        fail: function (error) 
          console.error(error);
          if (fail) 
            fail(error);
          
        ,
        complete: function (err) 
          complete && complete(err);
        
      )
  
      uploadTask.onProgressUpdate((res) => 
        progress && progress(res)
      )
  
      cancelTask && cancelTask(() => 
        uploadTask.abort()
      )
    
  
    function getQiniuToken(callback)  
      wx.request(
        url: config.qiniuUploadTokenURL,
        header: 
          \'Content-Type\': "application/json",
        //   \'Cookie\': \'vertx-web.session=\' + wx.getStorageSync("sessionId")
        ,
        success: function (res) 
          var token = res.data.message;
          if (token && token.length > 0) 
            config.qiniuUploadToken = token;
            if (callback) 
              callback();
            
           else 
            console.error(\'qiniuUploader cannot get your token, please check the uptokenURL or server\')
          
        ,
        fail: function (error) 
          console.error(\'qiniu UploadToken is null, please check the init config or networking: \' + error);
        
      )
    
  
    function uploadURLFromRegionCode(code) 
      var uploadURL = null;
      switch (code) 
        case \'ECN\': uploadURL = \'https://up.qiniup.com\'; break;
        case \'NCN\': uploadURL = \'https://up-z1.qiniup.com\'; break;
        case \'z2\': uploadURL = \'https://up-z0.qiniup.com\'; break;
        case \'NA\': uploadURL = \'https://up-na0.qiniup.com\'; break;
        case \'ASG\': uploadURL = \'https://up-as0.qiniup.com\'; break;
        default: console.error(\'please make the region is with one of [ECN, SCN, NCN, NA, ASG]\');
      
      return uploadURL;
    
  
  )();

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

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

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

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

ueditor上传图片到七牛云存储（formapi,java）

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

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

介意前端普通引入七牛云SDk上传图片到七牛云需要多个js，所以才有了base64的上传方式，简化操作，（懒。）七牛云官方文档如下https://developer.qiniu.com/kodo/kb/1326/how-to-upload-photos-to-seven-niuyun-base64-code 我们前端理所当然就... 查看详情

前端上传图片头像到七牛云格式变成text

参考技术A流程：七牛云后台的对象存储功能，nodejs后台生成七牛云的token，前端利用elementUI/ice的upload组件，文件名和token作为参数请求到七牛云后台。配置已经完成，写接口用的是express，koa同理，主要做法是先接收前端的图片... 查看详情

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

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

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

...上传工具，于是写了这样的一个工具。效果使用方法下载程序包点击下载解压后直接在config.json文件里面天上自己七牛云相关的信息。config"access_key":"************"," 查看详情

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

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

文件流数组上传到七牛云

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

小程序上传文件到七牛云

参考技术A第一步：获取七牛云token，这步操作很简单，请求七牛云接口即可getUpToken:function() varurl="resource/getUpToken" varheader= token:wx.getStorageSync("token") varthat=this ... 查看详情

springboot上传文件到七牛云

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

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

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

php上传文件与图片到七牛的实例详解(代码片段)

上传文件到七牛最简单的方式就是使用七牛官方最新的SDK用composer安装PHPSDKcomposer require qiniu/php-sdk 上传文件到七牛use QiniuAuth;use QiniuStorageUploadManager;$cfg = [ ‘access‘ =>&nb 查看详情

vue3+typescript上传文件到七牛云

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

java向七牛云上传图片的摆动程序(代码片段)

查看详情

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

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

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

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

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

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