t

package-lock.json

@@ -1109,6 +1109,22 @@
         }
       }
     },
+    "@babel/runtime-corejs2": {
+      "version": "7.22.11",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.22.11.tgz",
+      "integrity": "sha512-6z+Y7otDbBpPbg+eXnYVnrR7J3bq5Xp31QiGf7bJzbBOYUXLDGXnCdmxzH3xGxczTvaSXV/oeXFV4PNq3f64Sg==",
+      "requires": {
+        "core-js": "^2.6.12",
+        "regenerator-runtime": "^0.14.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.14.0",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+          "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+        }
+      }
+    },
     "@babel/template": {
       "version": "7.12.7",
       "resolved": "https://registry.npm.taobao.org/@babel/template/download/@babel/template-7.12.7.tgz?cache=0&sync_timestamp=1605904556456&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Ftemplate%2Fdownload%2F%40babel%2Ftemplate-7.12.7.tgz",
@@ -14651,6 +14667,23 @@
       "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew=",
       "dev": true
     },
+    "qiniu-js": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/qiniu-js/-/qiniu-js-3.4.1.tgz",
+      "integrity": "sha512-8vxrLqDPlJUk3fUAaTozh3TAT3ww9B5KqGogmGuTiFHnewXDoMxTCSY5z8Ab5UNdrCo6ZxDM07G/o++CICRUFw==",
+      "requires": {
+        "@babel/runtime-corejs2": "^7.10.2",
+        "querystring": "^0.2.1",
+        "spark-md5": "^3.0.0"
+      },
+      "dependencies": {
+        "querystring": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz",
+          "integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg=="
+        }
+      }
+    },
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz?cache=0&sync_timestamp=1610598235973&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fqs%2Fdownload%2Fqs-6.5.2.tgz",
@@ -16290,6 +16323,11 @@
       "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
       "dev": true
     },
+    "spark-md5": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-3.0.2.tgz",
+      "integrity": "sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw=="
+    },
     "spdx-correct": {
       "version": "3.1.1",
       "resolved": "https://registry.npm.taobao.org/spdx-correct/download/spdx-correct-3.1.1.tgz?cache=0&sync_timestamp=1590161967473&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fspdx-correct%2Fdownload%2Fspdx-correct-3.1.1.tgz",

src/api/other.js

@@ -75,4 +75,7 @@ export default {
   apibrandinfo: params => { // 品牌馆
     return request('/api/brand/info', params, 'loading')
   },
+  apiuploadvideotoken: params => { // 获取七牛云token和config
+    return request('/api/upload/video/token', params, 'loading')
+  },
 }

src/pagesMore/center/uploadRoom2.jsx

@@ -6,7 +6,7 @@ const HLKEY = '654mca0l38b489d9'
 const CJ = require('crypto-js')
 import './uploadRoom2.scss'
 
-
+import qiniuUploader from '@utils/qiniuUploader'
 import { TaroCropper } from 'taro-cropper'
 
 class Index extends Component {
@@ -197,6 +197,80 @@ class Index extends Component {
     })
   }
 
+
+  initQiniu() {
+    Taro.api.other.apiuploadvideotoken().then(res => {
+      let options = {
+          // bucket所在区域，这里是华北区。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域
+          region: 'SCN',
+  
+          // 获取uptoken方法三选一即可，执行优先级为：uptoken > uptokenURL > uptokenFunc。三选一，剩下两个置空。推荐使用uptokenURL，详情请见 README.md
+          // 由其他程序生成七牛云uptoken，然后直接写入uptoken
+          uptoken: res.token,
+          // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "0MLvWPnyy..."}
+          // uptokenURL: 'https://[yourserver.com]/api/uptoken',
+          // // uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数，详情请见 README.md
+          // uptokenFunc: function () { 
+          // 		// do something
+          // 		return qiniuUploadToken;
+          // },
+  
+          // bucket 外链域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 fileURL 字段。否则需要自己拼接
+          domain: res.domain,
+          // qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
+          // 微信自动生成的 filename较长，导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时，自定义下载名" 的组合方式。
+          // 自定义上传key 需要两个条件：1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义key。（请不要直接在sdk中修改options参数，修改方法请见demo的index.js）
+          // 通过fileURL下载文件时，文件自定义下载名，请参考：七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”（https://developer.qiniu.com/kodo/manual/1659/download-setting）。本sdk在README.md的"常见问题"板块中，有"通过fileURL下载文件时，自定义下载名"使用样例。
+          shouldUseQiniuFileName: false
+      };
+      // 将七牛云相关配置初始化进本sdk
+      qiniuUploader.init(options);
+    })
+  }
+
+  viviHandle () {
+    const userInfo = Taro.getStorageSync('APP_userInfo') || {}
+    this.initQiniu()
+    const that = this
+    Taro.chooseMedia({
+      count: 1,
+      mediaType: ['mix'], // ['video'],
+      sourceType: ['album', 'camera'],
+      maxDuration: 30,
+      camera: 'back',
+      success(res) {
+        const f = res.tempFiles[0]
+        // console.log(f.tempFilePath.split('.')[1])
+        let { formObj } = that.state
+        qiniuUploader.upload(f.tempFilePath, (suc) => {
+          formObj.video = suc.fileURL
+          that.setState({
+            formObj
+          })
+        }, (error) => {
+          console.error('error: ' + JSON.stringify(error));
+        },
+          // 此项为qiniuUploader.upload的第四个参数options。若想在单个方法中变更七牛云相关配置，可以使用上述参数。如果不需要在单个方法中变更七牛云相关配置，则可使用 null 作为参数占位符。推荐填写initQiniu()中的七牛云相关参数，然后此处使用null做占位符。
+          // 若想自定义上传key，请把自定义key写入此处options的key值。如果在使用自定义key后，其它七牛云配置参数想维持全局配置，请把此处options除key以外的属性值置空。
+          // 启用options参数请记得删除null占位符
+          {
+            key: `${userInfo.phone}-${+new Date()}${f.tempFilePath.split('.').length > 0 ? '.'+f.tempFilePath.split('.')[1] : ''}`,
+          },
+          // null,
+          (progress) => {
+              console.log('上传进度', progress.progress);
+              console.log('已经上传的数据长度', progress.totalBytesSent);
+              console.log('预期需要上传的数据总长度', progress.totalBytesExpectedToSend);
+          }, (cancelTask) => {
+            console.log(cancelTask)
+          }
+        );
+
+        
+      }
+    })
+  }
+
   dealImgHandle (key, moreStr) {
     this.uploadComImg((val) => {
       let { formObj } = this.state
@@ -426,6 +500,7 @@ class Index extends Component {
     const hideStatusoMoreOptions = {arr: [...dictData.hide_status]}
     const roomPositionMoreOptions = {arr: [...dictData.room_position]}
     const addIcon = require('@img/icon_upload_img.png')
+    const addIcon2 = require('@img/icon_upload_video.png')
     const closeIcon = require('@img/icon_g_close.png')
     const imgItems = imgArr.map((src, index) => {
       return (
@@ -697,6 +772,29 @@ class Index extends Component {
             </View>
           </View>
         </View>
+        <View className='scoped-has-right'>
+          <View className="scoped-box">
+            <View className="sb-title">房源视频</View>
+            <View className="scoped-img">
+              {
+                formObj.video
+                ?
+                <View className="si-op" onClick={this.viviHandle.bind(this)}>
+                  <Video
+                    src={formObj.video}
+                    controls={true}
+                    autoplay={false}
+                    className="img"
+                  />
+                </View>
+                :
+                <View className="si-op" onClick={this.viviHandle.bind(this)}>
+                  <Image src={addIcon2} className="img"/>
+                </View>
+              }
+            </View>
+          </View>
+        </View>
         <View className="scoped-box">
           <View className="sb-title">房源图片
             <View className="s">（最多9张）</View>

src/utils/qiniuUploader.js

@@ -0,0 +1,185 @@
+(function () {
+    // 请参考demo的index.js中的initQiniu()方法，若在使用处对options进行了赋值，则此处config不需要赋默认值。init(options) 即updateConfigWithOptions(options)，会对config进行赋值
+    var config = {
+        // bucket 所在区域。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域
+        qiniuRegion: '',
+        // 七牛云bucket 外链前缀，外链在下载资源时用到
+        qiniuBucketURLPrefix: '',
+
+        // 获取uptoken方法三选一即可，执行优先级为：uptoken > uptokenURL > uptokenFunc。三选一，剩下两个置空。推荐使用uptokenURL，详情请见 README.md
+        // 由其他程序生成七牛云uptoken，然后直接写入uptoken
+        qiniuUploadToken: '',
+        // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "0MLvWPnyy..."}
+        qiniuUploadTokenURL: '',
+        // uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数，详情请见 README.md
+        qiniuUploadTokenFunction: function () { },
+
+        // qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
+        // 微信自动生成的 filename较长，导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时，自定义下载名" 的组合方式。
+        // 自定义上传key 需要两个条件：1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义key。（请不要直接在sdk中修改options参数，修改方法请见demo的index.js）
+        // 通过fileURL下载文件时，自定义下载名，请参考：七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”（https://developer.qiniu.com/kodo/manual/1659/download-setting）。本sdk在README.md的"常见问题"板块中，有"通过fileURL下载文件时，自定义下载名"使用样例。
+        qiniuShouldUseQiniuFileName: false
+    }
+
+    // init(options) 将七牛云相关配置初始化进本sdk
+    // 在整个程序生命周期中，只需要 init(options); 一次即可
+    // 如果需要变更七牛云配置，再次调用 init(options); 即可
+    function init(options) {
+        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.qiniuBucketURLPrefix = options.domain;
+        }
+        config.qiniuShouldUseQiniuFileName = options.shouldUseQiniuFileName
+    }
+
+    // 正式上传的前置方法，做预处理，应用七牛云配置
+    function upload(filePath, success, fail, options, progress, cancelTask) {
+        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);
+        } else if (config.qiniuUploadTokenURL) {
+            getQiniuToken(function () {
+                doUpload(filePath, success, fail, options, progress, cancelTask);
+            });
+        } 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);
+        } else {
+            console.error('qiniu uploader need one of [uptoken, uptokenURL, uptokenFunc]');
+            return;
+        }
+    }
+
+    // 正式上传
+    function doUpload(filePath, success, fail, options, progress, cancelTask) {
+        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];
+        // 自定义上传key（即自定义上传文件名）。通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义文件名称。如果options非空，则使用options中的key作为fileName
+        if (options && options.key) {
+            fileName = options.key;
+        }
+        var formData = {
+            'token': config.qiniuUploadToken
+        };
+        // qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
+        if (!config.qiniuShouldUseQiniuFileName) {
+            formData['key'] = fileName
+        }
+        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);
+                    // 拼接fileURL
+                    var fileURL = config.qiniuBucketURLPrefix + '/' + dataObject.key;
+                    dataObject.fileURL = fileURL;
+                    // imageURL字段和fileURL字段重复，但本sdk不做删除，因为在最初版本使用的是imageURL。直接删除可能导致原有用户升级至新版sdk后出现异常。
+                    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);
+                }
+            }
+        })
+
+        // 文件上传进度
+        uploadTask.onProgressUpdate((res) => {
+            progress && progress(res)
+        })
+
+        // 中断文件上传
+        cancelTask && cancelTask(() => {
+            uploadTask.abort()
+        })
+    }
+
+    // 获取七牛云uptoken, url为后端服务器获取七牛云uptoken接口
+    function getQiniuToken(callback) {
+        wx.request({
+            url: config.qiniuUploadTokenURL,
+            success: function (res) {
+                var token = res.data.uptoken;
+                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);
+            }
+        })
+    }
+
+    // 选择七牛云文件上传接口，文件向匹配的接口中传输。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域
+    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 'SCN': uploadURL = 'https://up-z2.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;
+    }
+
+    module.exports = {
+        init: init,
+        upload: upload,
+    }
+})();