小程序 大文件 多图 直接上传七牛云
发布于 3 年前 作者 ahou 2765 次浏览 来自 分享

思想:通过从后端获取的七牛云SDK,完成大文件在小程序直接上传七牛云

 本文章实现多图直接上传功能,且能实现预览功能,效果图如下(有需要的朋友们可以看一下):

使用七牛云官方的SDK

下载:qiniu-wxapp-sdk

composer安装七牛云sdk

composer require itbdw/laravel-storage-qiniu

从后端取upToken的方法

public function uploadToken()
    {
        $auth = new Auth('AK', 'SK');  
        $bucket = 'bucket';   
        $token = $auth->uploadToken($bucket);
        return json_encode(['uptoken'=>$token]);
    }

小程序拿到token,用来上传图片

const qiniuUploader = require('../../qiniuUploader.js')

       data: {
	    imageURL:'',
	    uptoken:''
        },

        //大文件上传
    big(){
      wx.request({    
        url: 'http://www.xxxxx.com/index.php/api/uploadToken',//拿到token
        header: {
          'Content-Type''application/json;charset=UTF-8'
        },
        method: 'get',
        success: (response) => {
          this.setData({
            uptoken: response.data.uptoken
          })
          console.log(response)
          console.log(this.data.uptoken)
        }
      })
      wx.chooseImage({    
                //可上传多图
        count: 3,
        sizeType: ['original''compressed'],
        sourceType: ['album''camera'],
        success:(res) => {
                    //微信小程序的API,获取临时图片地址
          console.log(res)
          // tempFilePath可以作为img标签的src属性显示图片
          const img = res.tempFilePaths
          let arr=[]
          img.map(url=>{
              // 交给七牛上传
              qiniuUploader.upload(url, (res) => {
                                //数组追加
                arr.push('http://'+res.imageURL)
                this.setData({
                  'imageURL': arr,
                });
                console.log(this.data.imageURL)
              }, (error) => {
                console.log('error: ' + error);
              }, {
                region: 'NCN',  //华北
                domain: 'xxx.xxxxx.xxx'// 自己的域名
                key: Math.floor(Math.random()*50 + 50)+'.jpg'// 上传到七牛云图片就是这名字了
                // 以下方法三选一即可,优先级为:uptoken > uptokenURL > uptokenFunc
                uptoken: this.data.uptoken, // 由其他程序生成七牛 uptoken
                uptokenURL: 'http://www.xxxxx.com/index.php/api/uploadToken', 
                // uptokenFunc: function() {
                //  return '[yourTokenString]';
                // }
              }, (res) => {
                console.log('上传进度', res.progress)
                console.log('已经上传的数据长度', res.totalBytesSent)
                console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
              }, () => {
                // 取消上传
              }, () => {
                // `before` 上传前执行的操作
              }, (err) => {
                // `complete` 上传接受后执行的操作(无论成功还是失败都执行)
              });
          })
        }
      })
    },
3 回复

请问图片上传后七牛云是会生成图片访问链接吗?最近会用到图片存储的功能,目前还在了解中

这样可以验证文件格式是否为图片

                                let icon=x.tempFilePath.split('.')
                let picArr=['jpg','png','jpeg','gif']
                //判断是否为图片
                if(!picArr.includes(icon[1])){
                    wx.showToast({
                      title'必须上传图片',
                      icon:'error'
                    })
                    return;
                }
回到顶部