diff --git a/README.md b/README.md index 0009d1e..d972f12 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,56 @@ - 模块化组织:按功能模块划分目录,便于维护和管理 - 组件复用:分包内的通用组件集中管理,提高代码复用性 + +## 配置文件说明 + +### config.js +项目核心配置文件,包含以下配置: + +**1. 环境配置** +```javascript +// 当前环境 +const type = 'prod' + +// 环境配置 +const config = { + dev: { + baseUrl: 'http://h5.xzaiyp.top/jewelry-admin', + }, + prod: { + baseUrl: 'https://jewelry-admin.hhlm1688.com/jewelry-admin', + } +} +``` + +**2. 默认配置** +```javascript +const defaultConfig = { + // 腾讯地图Key + mapKey: 'XMBBZ-BCPCV-SXPPQ-5Y7MY-PHZXK-YFFVU', + // 阿里云OSS配置 + aliOss: { + url: 'https://image.hhlm1688.com/', + config: { + region: 'oss-cn-guangzhou', + accessKeyId: '***', + accessKeySecret: '***', + bucket: 'hanhaiimage', + endpoint: 'oss-cn-shenzhen.aliyuncs.com', + } + } +} +``` + +**3. UI框架配置** +```javascript +uni.$uv.setConfig({ + config: { + unit: 'rpx' // 设置默认单位 + }, +}) +``` + ## 核心模块详解 ### 1. Mixins 混入 @@ -185,6 +235,7 @@ this.$api('product.create', { - utils.js: 通用工具函数 - timeUtils.js: 时间处理 - position.js: 定位与位置计算 +- oss-upload: 阿里云OSS上传模块 **使用示例:** ```javascript @@ -222,6 +273,97 @@ wxPay(orderData) ``` + +#### 3.3 OSS上传模块 + +**配置说明:** +项目使用阿里云OSS进行文件存储,相关配置位于config.js中: + + +**使用示例:** + +1. 单文件上传 +```javascript +// 在组件中使用 +export default { + methods: { + async onUpload(file) { + try { + const result = await this.$Oss.ossUpload(file) + console.log('上传成功:', result.url) + } catch (error) { + console.error('上传失败:', error) + } + } + } +} +``` + +2. 多文件上传 +```javascript +// 在组件中使用 +export default { + methods: { + onUploadMultiple(files) { + files.forEach(file => { + self.$Oss.ossUpload(file).then(url => { + self.fileList.push({ + url + }) + }) + }) + } + } +} +``` + +3. 在uv-upload组件中使用 +```html + + + +``` + +**注意事项:** +1. 上传前请确保OSS配置正确 +2. 建议对上传文件大小进行限制 +3. 支持的文件类型:图片、视频、文档等 +4. 上传失败时会抛出异常,请做好错误处理 + ## 最佳实践 ### 1. 列表页面开发 @@ -288,52 +430,3 @@ export default { - 检查mixinsListApi是否正确配置 - 确认网络请求是否正常 - 查看请求参数格式是否正确 - -## 配置文件说明 - -### config.js -项目核心配置文件,包含以下配置: - -**1. 环境配置** -```javascript -// 当前环境 -const type = 'prod' - -// 环境配置 -const config = { - dev: { - baseUrl: 'http://h5.xzaiyp.top/jewelry-admin', - }, - prod: { - baseUrl: 'https://jewelry-admin.hhlm1688.com/jewelry-admin', - } -} -``` - -**2. 默认配置** -```javascript -const defaultConfig = { - // 腾讯地图Key - mapKey: 'XMBBZ-BCPCV-SXPPQ-5Y7MY-PHZXK-YFFVU', - // 阿里云OSS配置 - aliOss: { - url: 'https://image.hhlm1688.com/', - config: { - region: 'oss-cn-guangzhou', - accessKeyId: '***', - accessKeySecret: '***', - bucket: 'hanhaiimage', - endpoint: 'oss-cn-shenzhen.aliyuncs.com', - } - }, -} -``` - -**3. UI框架配置** -```javascript -uni.$uv.setConfig({ - config: { - unit: 'rpx' // 设置默认单位 - }, -}) -``` diff --git a/pages_order/auth/wxUserInfo.vue b/pages_order/auth/wxUserInfo.vue index 9e96057..069fc37 100644 --- a/pages_order/auth/wxUserInfo.vue +++ b/pages_order/auth/wxUserInfo.vue @@ -83,10 +83,9 @@ computed: {}, methods: { onChooseAvatar(res) { - let self = this - self.$Oss.ossUpload(res.target.avatarUrl) + this.$Oss.ossUpload(res.target.avatarUrl) .then(url => { - self.userInfoForm.headImage = url + this.userInfoForm.headImage = url }) }, getPhone(e){ diff --git a/utils/oss-upload/oss/index.js b/utils/oss-upload/oss/index.js index e20f400..4b535ce 100644 --- a/utils/oss-upload/oss/index.js +++ b/utils/oss-upload/oss/index.js @@ -2,10 +2,7 @@ * 阿里云OSS工具类 */ import OSSConfig from "@/utils/oss-upload/oss/OSSConfig.js" -//支持web端 -import { - uploadFileToOSS -} from '@/utils/oss-upload/oss/web.js' + import ossConfig from '@/config.js' /** @@ -93,9 +90,6 @@ export function ossUploadImage({ count: 1, sizeType, success(res) { - // // #ifdef H5 - // return uploadFileToOSS(res.tempFiles[0]).then(success).catch(fail) - // // #endif ossUpload(res.tempFilePaths[0], key, folder).then(success).catch(fail) }, fail @@ -123,9 +117,6 @@ export function ossUploadVideo({ maxDuration, camera, success(res) { - // // #ifdef H5 - // return uploadFileToOSS(res.tempFile).then(success).catch(fail) - // // #endif ossUpload(res.tempFilePath, key, folder).then(success).catch(fail) }, fail diff --git a/utils/oss-upload/oss/web.js b/utils/oss-upload/oss/web.js deleted file mode 100644 index 9b419ae..0000000 --- a/utils/oss-upload/oss/web.js +++ /dev/null @@ -1,63 +0,0 @@ -// 此方法适用于web -// import OSS from "ali-oss" -import config from '@/config.js' - -/** - * 生成一个随机的Key - */ -function storeKey() { - let s = []; - let hexDigits = "0123456789abcdef"; - for (let i = 0; i < 36; i++) { - s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); - } - s[14] = "4"; - s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); - s[8] = s[13] = s[18] = s[23] = "-"; - return s.join(""); -} - -/** - * 根据当天日期在OSS端生成文件夹 - */ -function storeFolder() { - const date = new Date(); - const formatNumber = n => { - n = n.toString() - return n[1] ? n : '0' + n - } - return [date.getFullYear(), date.getMonth() + 1, date.getDate()].map(formatNumber).join('-') -} - - -export function uploadFileToOSS(file) { - - uni.showLoading({ - title: '上传中...' - }); - - return new Promise((resolve,reject) => { - // 创建OSS实例 - const client = new OSS(config.aliOss.config); - - // 设置文件名和文件目录 - const suffix = '.' + file.name.split('.').pop(); - let key = storeFolder() - if(key[key.length - 1] != '/') key += '/' - const fileName = key + storeKey() + suffix; // 注意:文件名需要是唯一的 - - // 使用put接口上传文件 - client.multipartUpload(fileName, file, { - headers: { - 'Content-Disposition': 'inline', - 'Content-Type': file.type - } - }).then(res => { - uni.hideLoading(); - resolve(config.aliOss.url + res.name); - }).catch(err => { - uni.hideLoading(); - reject(err) - }) - }) -} \ No newline at end of file