uniapp app h5 小程序腾讯直传cos

/**
 * 获取视频
 * @param {number} count 最多可以选择的文件个数
 * @param {Array<String>} sourceType album 从相册选视频,camera 使用相机拍摄
 * @param {Array<String>} sizeType 可以指定是原图还是压缩图,默认二者都有
 * @returns {Promise<unknown>}
 */
export const chooseVideoByPromise = ({
  count = 9,
  sourceType = ['camera', 'album'],
  sizeType = ['original', 'compressed'],
  progressList = [],
} = {}) => {
  return new Promise((resolve, reject) => {
    uni.chooseVideo({
      count,
      sizeType,
      success(res) {
        console.log(res, 'rrrr')

        // #ifdef APP-PLUS
        resolve(
          uploadFile({
            imgs: [res.tempFile || res.tempFilePath],
            progressList,
            isPath: true,
            pathType: 'video.mp4',
          }),
        )
        // #endif

        // #ifndef APP-PLUS
        resolve(uploadFile({ imgs: [res.tempFile || res.tempFilePath], progressList }))
        // #endif

        // resolve(res)
      },
      fail(err) {
        reject(err)
      },
      complete() {},
    })
  })
}

/**
 * 获取图片
 * @param count
 * @param sizeType
 * @sourceType
 * @returns {Promise<unknown>}
 */
export const chooseImageByPromise = ({
  count = 9,
  sourceType = ['camera', 'album'],
  sizeType = ['original', 'compressed'],
  progressList = [],
} = {}) => {
  return new Promise((resolve, reject) => {
    uni.chooseImage({
      count,
      sizeType, // 可以指定是原图还是压缩图,默认二者都有
      success(res) {
        console.log(res, 'sss')

        resolve(uploadFile({ imgs: res.tempFiles, progressList }))
      },
      fail(err) {
        reject(err)
      },
      complete() {},
    })
  })
}

/**
 * 批量上传照片
 * @param imgs string:[]
 * @param name 标识
 * @param data 业务参数:{}
 * @returns {Promise<unknown>}
 */
export const uploadFile = ({
  imgs,
  data,
  progressList = [],
  isPath = false,
  pathType = 'video',
}) => {
  const taskList = []
  console.log(imgs, 'sss')
  for (let i = 0; i < imgs.length; i++) {
    const taskItem = upload({
      url: imgs[i],
      name: isPath ? pathType : imgs[i].name,
      idx: i,
      progressList,
      formData: data,
      isPath,
    })
    taskList.push(taskItem)
  }

  return new Promise((resolve, reject) => {
    Promise.all(taskList)
      .then((urls) => {
        console.log(urls, 'urls')
        resolve(urls)
      })
      .catch((err) => {
        const errMsg = Object.hasOwnProperty.call(err, 'errMsg') ? err.errMsg : err
        reject(errMsg)
      })
  })
}

/**
 * @description 上传图片
 * @param url
 * @returns {Promise<unknown>}
 */
export const upload = ({ url, name, data, isPath = false }) => {
  console.log(url, 'upload-----urlrurl')
  let _this = this
  let fileName =
    Date.now() +
    Math.floor(Math.random() * (100 - 0)) * Math.floor(Math.random() * (100 - 0)) +
    name

  return new Promise((resolve, reject) => {
    // 此处替换为你自己的网络请求方法
    VoHttp.apiCreatedCosGet({
      businessType: 1,
      fileUrl: 1,
    }).then((res) => {
      var formData = {
        key: fileName,
        policy: res.data.policy, // 这个传 policy 的 base64 字符串
        success_action_status: 200,
        'q-sign-algorithm': 'sha1',
        'q-ak': res.data.secretId,
        'q-key-time': res.data.KeyTime,
        'q-signature': res.data.qSignature,
        'x-cos-security-token': res.data.secretToken,
      }
      formData = { ...data, ...formData }
      // 如果服务端用了临时密钥计算,需要传 x-cos-security-token
      // formData['x-cos-security-token'] = formData.securityToken

      let options = {
        url: devConf.tencentCosUrl, //仅为示例,非真实的接口地址
        name: 'file',
        formData: formData,
        success: (res) => {
          resolve({ fileName: fileName, fileNameUrl: devConf.tencentCosUrl + '/' + fileName })
        },
        fail(err) {
          reject(err)
        },
      }
      //是否上传路径
      if (isPath) {
        options.filePath = url
      } else {
        options.file = url
      }

      uni.uploadFile(options)
    })
  })
}
### 如何开发或使用表情包制作小程序 #### 开发背景 微信小程序作为一种轻量化应用形式,具有无需安装、即用即走的特点[^1]。其技术架构允许开发者通过简单的配置实现多种功能模块,其中包括表情包制作的功能。 #### 表情包制作的核心需求分析 在开发表情包制作的小程序时,核心需求通常包括以下几个方面: - **自定义表情包管理**:支持用户上传图片作为表情素材,并能够对其进行编辑和保存。 - **动态GIF支持**:除了静态图片外,还需要支持动态GIF文件的处理与展示。 - **混合显示能力**:能够在输入框中选择并发送表情,同时支持文字与表情的混合显示。 - **社交分享功能**:利用微信的社交网络特性,让用户可以将自己制作的表情包分享给好友或群聊[^2]。 #### 技术选型与实现方案 为了满足上述需求,可以选择基于 `uni-app` 进行跨平台开发,这样不仅可以覆盖微信小程序,还可以扩展至其他平台如 H5App。以下是具体的实现步骤: ##### 1. 前端界面设计 前端界面应包含以下主要组件: - **表情包键盘**:提供一个可滑动的选择区域,用于浏览已有的表情包资源。 - **上传入口**:允许用户从相册或者相机中选取图片作为新的表情素材。 - **编辑工具栏**:集成裁剪、滤镜等功能以便于用户对原始图片进行美化加工。 ```html <template> <view class="container"> <!-- 输入框 --> <input type="text" v-model="message" placeholder="请输入消息..." /> <!-- 表情面板 --> <scroll-view scroll-x="true" class="emoji-panel"> <image v-for="(item, index) in emojis" :key="index" :src="item.src" @click="selectEmoji(item)" ></image> <!-- 添加按钮 --> <button @click="uploadImage">+</button> </scroll-view> <!-- 预览区 --> <canvas id="previewCanvas"></canvas> </view> </template> ``` ##### 2. 后端数据存储 对于用户生成的内容(UGC),需要有一个稳定的后端服务来接收并持久化这些数据。推荐采用云数据库解决方案简化部署流程,比如腾讯云提供的 Serverless 架构。 - 使用 API Gateway 接收来自客户端的数据请求; - 利用 COS (Cloud Object Storage) 存储用户的媒体文件; - 数据库记录每张图片的相关元信息,例如作者ID、发布时间等字段。 ##### 3. 功能增强建议 为了让应用程序更具吸引力,可以从以下几个方向进一步优化用户体验: - 实现 AI 自动生成标签功能,帮助识别图片中的对象自动打上相应分类标记; - 加入排行榜机制激励创作者生产高质量作品; - 提供模板样式选项降低创作门槛让普通人也能轻松参与其中[^3]。 #### 总结 综上所述,通过合理规划前后端逻辑配合现代化框架的支持完全可以打造出一款实用又有趣的表情包制作类微信/支付宝小程序。这不仅有助于提升个人品牌影响力还能促进社区互动形成良性循环生态系统。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木贝西

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值