简单、简单、简单入手，易学，十分钟搞定火山云图片上传

更新记录

1.0.0（2024-12-31）

初始版本

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.8.6 app-vue	×	√	√	√	√	√

钉钉小程序	快手小程序	飞书小程序	京东小程序	鸿蒙元服务
√	√	√	√	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
×	×	×	×	×	×	×	×	×

使用说明

本插件是一个云端上传插件，能够将本地的文件包括图片上传到云存储，ImageX是火山引擎推出的专业图像处理的一个服务；此插件让你简单直接使用，无需阅读文档，下载即可使用，如需详细了解请阅官网文档（火山云上传图片）

本插件使用说明，请耐心看完，建议下载完整项目试用

安装SDK

npm install tt-uploader-miniprogram

在你自己的页面中引入upload文件

<script setup name=''>
import Upload from '@/components/wlp-uploadOss/wlp-uploadOss.vue'
</script>
<template>
<view>
  <Upload></Upload>
</view>
</template>
<style scoped lang='scss'>
</style>

utils/uploadCallback文件中userId和appId替换为自己的

const userId = 'XXXXX'; // 唯一即可
const appId = xxxx;

字段名	类型	是否必传	默认值	描述
userId	String	是	null	用户 ID。用于进行单点追踪日志，定位某一个用户的日志，请设置一个唯一 ID。
appId	Number	是	null	应用 ID。用于定位某一条业务线的日志。您可以登录 veImageX 控制台的应用管理，查看账号下已创建应用的应用 ID。您可以通过调用 GetImageXQueryApps 接口获取账号下已创建的全部应用 ID。
imageConfig	Object	是	null	图片上传专用配置，默认值为 null。详情请参考 imageConfig。

utils/uploadOss文件中的serviceId替换为自己的

imageConfig: {
    serviceId: 'XXXX', // 请替换成你的服务 ID
}

utils/home文件中为获取stsToken的后端接口，请替换成你自己的后端接口，我自己的响应参数为

data: {
    accessKeyId: "XXXXXX3Y2Q1Yzc0NGI0YmIwNTA3ZDgxMzFhM2E1M2Y"
    currentTime: "2024-12-31T11:36:59+08:00"
    expiredTime: "2024-12-31T11:46:59+08:00"
    secretAccessKey:    "XXXX5oYsJbCN/KaI0aE47ujnSh0i9Y6QPnswEb7rODeIDt/qTIolP/VU"
    sessionToken: "XXXXXMVEFjY2Vzc0tleUlkIjoiQUtMVFp"
}

tip：我返回的key均为小写，与实际官网文档中不太一样，但是我的代码中已做处理！！！！！

线上发布时需要添加域名白名单

字段名	内容
request 合法域名	https://imagex.volcengineapi.com https://mcs.zijieapi.com https://tos-lf-x-tob.bytecdn.cn https://tos-lq-x-tob.bytecdn.cn https://tos-hl-x-tob.bytecdn.cn
uploadFile 合法域名	https://tos-lf-x-tob.bytecdn.cn https://tos-lq-x-tob.bytecdn.cn https://tos-hl-x-tob.bytecdn.cn

最后如何显示上传成功，那么恭喜你完成了火山云图片上传

简单、简单、简单入手，易学，十分钟搞定火山云图片上传图片上传 火山云 简单

更新记录

1.0.0（2024-12-31）

平台兼容性

使用说明

本插件使用说明，请耐心看完，建议下载完整项目试用

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

简单、简单、简单入手，易学，半天掌握canvas制作，超简单

简单、简单、简单入手，易学，十分钟搞定火山云图片上传

简单、简单、简单入手，易学，十分钟搞定火山云图片上传 图片上传 火山云 简单

更新记录

1.0.0（2024-12-31）

平台兼容性

使用说明

本插件使用说明，请耐心看完，建议下载完整项目试用

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

简单、简单、简单入手，易学，半天掌握canvas制作，超简单

简单、简单、简单入手，易学，十分钟搞定火山云图片上传

Modal title

简单、简单、简单入手，易学，十分钟搞定火山云图片上传图片上传火山云简单