From f1334d522cc09dc6344e41a9ac8cbf6fa83ece89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=B8=85?= <3115919733@qq.com> Date: Tue, 17 Jun 2025 10:38:07 +0800 Subject: [PATCH] =?UTF-8?q?tms=E8=A3=85=E8=BD=A6=E5=AE=A1=E6=A0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/my-check-box/my-check-box.vue | 64 ++ pages/login/index.vue | 4 +- pages/tms/features/VehicleInOut/index.vue | 83 ++- pages/tms/features/check/index.vue | 161 +++++ pages/tms/index.vue | 9 + uni_modules/uni-file-picker/changelog.md | 63 ++ .../uni-file-picker/choose-and-upload-file.js | 224 ++++++ .../uni-file-picker/uni-file-picker.vue | 656 ++++++++++++++++++ .../uni-file-picker/upload-file.vue | 325 +++++++++ .../uni-file-picker/upload-image.vue | 292 ++++++++ .../components/uni-file-picker/utils.js | 109 +++ uni_modules/uni-file-picker/package.json | 86 +++ uni_modules/uni-file-picker/readme.md | 11 + 13 files changed, 2081 insertions(+), 6 deletions(-) create mode 100644 components/my-check-box/my-check-box.vue create mode 100644 pages/tms/features/check/index.vue create mode 100644 uni_modules/uni-file-picker/changelog.md create mode 100644 uni_modules/uni-file-picker/components/uni-file-picker/choose-and-upload-file.js create mode 100644 uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue create mode 100644 uni_modules/uni-file-picker/components/uni-file-picker/upload-file.vue create mode 100644 uni_modules/uni-file-picker/components/uni-file-picker/upload-image.vue create mode 100644 uni_modules/uni-file-picker/components/uni-file-picker/utils.js create mode 100644 uni_modules/uni-file-picker/package.json create mode 100644 uni_modules/uni-file-picker/readme.md diff --git a/components/my-check-box/my-check-box.vue b/components/my-check-box/my-check-box.vue new file mode 100644 index 0000000..1deade3 --- /dev/null +++ b/components/my-check-box/my-check-box.vue @@ -0,0 +1,64 @@ + + + + + \ No newline at end of file diff --git a/pages/login/index.vue b/pages/login/index.vue index eefe912..b3711fb 100644 --- a/pages/login/index.vue +++ b/pages/login/index.vue @@ -294,10 +294,10 @@ export default { .input-color .uni-input-placeholder { color:dimgray !important } - .input-color /deep/ .uni-input-input { + .input-color ::v-deep .uni-input-input { color:cornsilk !important } - .input-color /deep/ .u-icon__icon { + .input-color ::v-deep .u-icon__icon { color: cornsilk !important } .width-form-item { diff --git a/pages/tms/features/VehicleInOut/index.vue b/pages/tms/features/VehicleInOut/index.vue index 4b323ae..81dad49 100644 --- a/pages/tms/features/VehicleInOut/index.vue +++ b/pages/tms/features/VehicleInOut/index.vue @@ -1,5 +1,5 @@ @@ -75,10 +88,13 @@ exitWeight: '', carNumList: [], vehicleList: [], - baseUrl: 'http://114.215.188.164:9001/jeecg-boot', + imageValue:[{url:'https://pic.rmb.bdstatic.com/bjh/3f11932d2831/250307/2453145db3c360f31c67372e9b24e49e.jpeg'}], + fileList:[], + baseUrl: 'http://localhost:9001/tms', url: { getCarNum: '/vehicleinout/vehicleInOut/getCarNum', - handleConfirm: '/vehicleinout/vehicleInOut/handleConfirm' + handleConfirm: '/vehicleinout/vehicleInOut/handleConfirm', + upload: '/sys/common/upload?biz=temp', } } @@ -128,6 +144,65 @@ } }) }, + // 获取上传状态 + select(e){ + console.log('选择文件：',e) + this.imageValue = [...e.tempFiles, ...this.imageValue] + uni.uploadFile({ + url: this.baseUrl + this.url.upload, + filePath: e.tempFilePaths[0], + name: 'file', + success: (uploadFileRes) => { + let data = JSON.parse(uploadFileRes.data) + console.log('data：',data) + this.fileList.push({ + tempFilePath: e.tempFilePaths[0], + message: data.message + }) + console.log('fileList：',this.fileList) + console.log('imageValue：',this.imageValue) + }, + }); + console.log("===========") + }, + deleteImage(e){ + console.log('删除文件：',e) + this.imageValue = this.imageValue.filter(x => x.path!=e.tempFile.path) + this.fileList = this.fileList.filter(x => x.tempFilePath!=e.tempFilePath) + console.log('imageValue：',this.imageValue) + console.log('this.fileList：',this.fileList) + }, + // 获取上传进度 + progress(e){ + console.log('上传进度：',e) + }, + + // 上传成功 + success(e){ + console.log('上传成功') + }, + + // 上传失败 + fail(e){ + console.log('上传失败：',e) + }, + onSubmit(){ + console.log('imageValue：',this.imageValue[0]) + console.log(this.baseUrl + this.url.upload); + uni.uploadFile({ + url: this.baseUrl + this.url.upload, + filePath: this.imageValue[0].path, + name: 'file', + success: (uploadFileRes) => { + let data = JSON.parse(uploadFileRes.data) + console.log('data：',data) + }, + fail: (err) => { + console.error('上传失败:', err); + uni.showToast({ title: '上传失败', icon: 'none' }); + } + }); + }, getRequest(url='',data={},method='',){ return new Promise((resolve, reject) => { uni.request({ diff --git a/pages/tms/features/check/index.vue b/pages/tms/features/check/index.vue new file mode 100644 index 0000000..815d582 --- /dev/null +++ b/pages/tms/features/check/index.vue @@ -0,0 +1,161 @@ + + + + + \ No newline at end of file diff --git a/pages/tms/index.vue b/pages/tms/index.vue index 8d25d05..7154517 100644 --- a/pages/tms/index.vue +++ b/pages/tms/index.vue @@ -36,6 +36,15 @@ label: '车辆审核', id:'500001' }, + { + title: '装车审核', + name: 'check/index', + en_name: 'check', + color: 'cyan', + cuIcon: 'shop', + label: '车辆审核', + id:'500001' + }, ], } }, diff --git a/uni_modules/uni-file-picker/changelog.md b/uni_modules/uni-file-picker/changelog.md new file mode 100644 index 0000000..5c81026 --- /dev/null +++ b/uni_modules/uni-file-picker/changelog.md @@ -0,0 +1,63 @@ +## 1.0.2（2022-07-04） +- 修复 在uni-forms下样式不生效的bug +## 1.0.1（2021-11-23） +- 修复 参数为对象的情况下，url在某些情况显示错误的bug +## 1.0.0（2021-11-19） +- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) +- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-file-picker](https://uniapp.dcloud.io/component/uniui/uni-file-picker) +## 0.2.16（2021-11-08） +- 修复 传入空对象 ，显示错误的Bug +## 0.2.15（2021-08-30） +- 修复 return-type="object" 时且存在v-model时，无法删除文件的Bug +## 0.2.14（2021-08-23） +- 新增 参数中返回 fileID 字段 +## 0.2.13（2021-08-23） +- 修复 腾讯云传入fileID 不能回显的bug +- 修复 选择图片后，不能放大的问题 +## 0.2.12（2021-08-17） +- 修复 由于 0.2.11 版本引起的不能回显图片的Bug +## 0.2.11（2021-08-16） +- 新增 clearFiles(index) 方法，可以手动删除指定文件 +- 修复 v-model 值设为 null 报错的Bug +## 0.2.10（2021-08-13） +- 修复 return-type="object" 时，无法删除文件的Bug +## 0.2.9（2021-08-03） +- 修复 auto-upload 属性失效的Bug +## 0.2.8（2021-07-31） +- 修复 fileExtname属性不指定值报错的Bug +## 0.2.7（2021-07-31） +- 修复 在某种场景下图片不回显的Bug +## 0.2.6（2021-07-30） +- 修复 return-type为object下，返回值不正确的Bug +## 0.2.5（2021-07-30） +- 修复（重要） H5 平台下如果和uni-forms组件一同使用导致页面卡死的问题 +## 0.2.3（2021-07-28） +- 优化 调整示例代码 +## 0.2.2（2021-07-27） +- 修复 vue3 下赋值错误的Bug +- 优化 h5平台下上传文件导致页面卡死的问题 +## 0.2.0（2021-07-13） +- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) +## 0.1.1（2021-07-02） +- 修复 sourceType 缺少默认值导致 ios 无法选择文件 +## 0.1.0（2021-06-30） +- 优化 解耦与uniCloud的强绑定关系 ，如不绑定服务空间，默认autoUpload为false且不可更改 +## 0.0.11（2021-06-30） +- 修复 由 0.0.10 版本引发的 returnType 属性失效的问题 +## 0.0.10（2021-06-29） +- 优化 文件上传后进度条消失时机 +## 0.0.9（2021-06-29） +- 修复 在uni-forms 中，删除文件 ，获取的值不对的Bug +## 0.0.8（2021-06-15） +- 修复 删除文件时无法触发 v-model 的Bug +## 0.0.7（2021-05-12） +- 新增 组件示例地址 +## 0.0.6（2021-04-09） +- 修复 选择的文件非 file-extname 字段指定的扩展名报错的Bug +## 0.0.5（2021-04-09） +- 优化 更新组件示例 +## 0.0.4（2021-04-09） +- 优化 file-extname 字段支持字符串写法，多个扩展名需要用逗号分隔 +## 0.0.3（2021-02-05） +- 调整为uni_modules目录规范 +- 修复 微信小程序不指定 fileExtname 属性选择失败的Bug diff --git a/uni_modules/uni-file-picker/components/uni-file-picker/choose-and-upload-file.js b/uni_modules/uni-file-picker/components/uni-file-picker/choose-and-upload-file.js new file mode 100644 index 0000000..24a07f5 --- /dev/null +++ b/uni_modules/uni-file-picker/components/uni-file-picker/choose-and-upload-file.js @@ -0,0 +1,224 @@ +'use strict'; + +const ERR_MSG_OK = 'chooseAndUploadFile:ok'; +const ERR_MSG_FAIL = 'chooseAndUploadFile:fail'; + +function chooseImage(opts) { + const { + count, + sizeType = ['original', 'compressed'], + sourceType = ['album', 'camera'], + extension + } = opts + return new Promise((resolve, reject) => { + uni.chooseImage({ + count, + sizeType, + sourceType, + extension, + success(res) { + resolve(normalizeChooseAndUploadFileRes(res, 'image')); + }, + fail(res) { + reject({ + errMsg: res.errMsg.replace('chooseImage:fail', ERR_MSG_FAIL), + }); + }, + }); + }); +} + +function chooseVideo(opts) { + const { + camera, + compressed, + maxDuration, + sourceType = ['album', 'camera'], + extension + } = opts; + return new Promise((resolve, reject) => { + uni.chooseVideo({ + camera, + compressed, + maxDuration, + sourceType, + extension, + success(res) { + const { + tempFilePath, + duration, + size, + height, + width + } = res; + resolve(normalizeChooseAndUploadFileRes({ + errMsg: 'chooseVideo:ok', + tempFilePaths: [tempFilePath], + tempFiles: [ + { + name: (res.tempFile && res.tempFile.name) || '', + path: tempFilePath, + size, + type: (res.tempFile && res.tempFile.type) || '', + width, + height, + duration, + fileType: 'video', + cloudPath: '', + }, ], + }, 'video')); + }, + fail(res) { + reject({ + errMsg: res.errMsg.replace('chooseVideo:fail', ERR_MSG_FAIL), + }); + }, + }); + }); +} + +function chooseAll(opts) { + const { + count, + extension + } = opts; + return new Promise((resolve, reject) => { + let chooseFile = uni.chooseFile; + if (typeof wx !== 'undefined' && + typeof wx.chooseMessageFile === 'function') { + chooseFile = wx.chooseMessageFile; + } + if (typeof chooseFile !== 'function') { + return reject({ + errMsg: ERR_MSG_FAIL + ' 请指定 type 类型，该平台仅支持选择 image 或 video。', + }); + } + chooseFile({ + type: 'all', + count, + extension, + success(res) { + resolve(normalizeChooseAndUploadFileRes(res)); + }, + fail(res) { + reject({ + errMsg: res.errMsg.replace('chooseFile:fail', ERR_MSG_FAIL), + }); + }, + }); + }); +} + +function normalizeChooseAndUploadFileRes(res, fileType) { + res.tempFiles.forEach((item, index) => { + if (!item.name) { + item.name = item.path.substring(item.path.lastIndexOf('/') + 1); + } + if (fileType) { + item.fileType = fileType; + } + item.cloudPath = + Date.now() + '_' + index + item.name.substring(item.name.lastIndexOf('.')); + }); + if (!res.tempFilePaths) { + res.tempFilePaths = res.tempFiles.map((file) => file.path); + } + return res; +} + +function uploadCloudFiles(files, max = 5, onUploadProgress) { + files = JSON.parse(JSON.stringify(files)) + const len = files.length + let count = 0 + let self = this + return new Promise(resolve => { + while (count < max) { + next() + } + + function next() { + let cur = count++ + if (cur >= len) { + !files.find(item => !item.url && !item.errMsg) && resolve(files) + return + } + const fileItem = files[cur] + const index = self.files.findIndex(v => v.uuid === fileItem.uuid) + fileItem.url = '' + delete fileItem.errMsg + + uniCloud + .uploadFile({ + filePath: fileItem.path, + cloudPath: fileItem.cloudPath, + fileType: fileItem.fileType, + onUploadProgress: res => { + res.index = index + onUploadProgress && onUploadProgress(res) + } + }) + .then(res => { + fileItem.url = res.fileID + fileItem.index = index + if (cur < len) { + next() + } + }) + .catch(res => { + fileItem.errMsg = res.errMsg || res.message + fileItem.index = index + if (cur < len) { + next() + } + }) + } + }) +} + + + + + +function uploadFiles(choosePromise, { + onChooseFile, + onUploadProgress +}) { + return choosePromise + .then((res) => { + if (onChooseFile) { + const customChooseRes = onChooseFile(res); + if (typeof customChooseRes !== 'undefined') { + return Promise.resolve(customChooseRes).then((chooseRes) => typeof chooseRes === 'undefined' ? + res : chooseRes); + } + } + return res; + }) + .then((res) => { + if (res === false) { + return { + errMsg: ERR_MSG_OK, + tempFilePaths: [], + tempFiles: [], + }; + } + return res + }) +} + +function chooseAndUploadFile(opts = { + type: 'all' +}) { + if (opts.type === 'image') { + return uploadFiles(chooseImage(opts), opts); + } + else if (opts.type === 'video') { + return uploadFiles(chooseVideo(opts), opts); + } + return uploadFiles(chooseAll(opts), opts); +} + +export { + chooseAndUploadFile, + uploadCloudFiles +}; diff --git a/uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue b/uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue new file mode 100644 index 0000000..0928a41 --- /dev/null +++ b/uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue @@ -0,0 +1,656 @@ + + + + + diff --git a/uni_modules/uni-file-picker/components/uni-file-picker/upload-file.vue b/uni_modules/uni-file-picker/components/uni-file-picker/upload-file.vue new file mode 100644 index 0000000..625d92e --- /dev/null +++ b/uni_modules/uni-file-picker/components/uni-file-picker/upload-file.vue @@ -0,0 +1,325 @@ + + + + + diff --git a/uni_modules/uni-file-picker/components/uni-file-picker/upload-image.vue b/uni_modules/uni-file-picker/components/uni-file-picker/upload-image.vue new file mode 100644 index 0000000..2a29bc2 --- /dev/null +++ b/uni_modules/uni-file-picker/components/uni-file-picker/upload-image.vue @@ -0,0 +1,292 @@ + + + + + diff --git a/uni_modules/uni-file-picker/components/uni-file-picker/utils.js b/uni_modules/uni-file-picker/components/uni-file-picker/utils.js new file mode 100644 index 0000000..60aaa3e --- /dev/null +++ b/uni_modules/uni-file-picker/components/uni-file-picker/utils.js @@ -0,0 +1,109 @@ +/** + * 获取文件名和后缀 + * @param {String} name + */ +export const get_file_ext = (name) => { + const last_len = name.lastIndexOf('.') + const len = name.length + return { + name: name.substring(0, last_len), + ext: name.substring(last_len + 1, len) + } +} + +/** + * 获取扩展名 + * @param {Array} fileExtname + */ +export const get_extname = (fileExtname) => { + if (!Array.isArray(fileExtname)) { + let extname = fileExtname.replace(/(\[|\])/g, '') + return extname.split(',') + } else { + return fileExtname + } + return [] +} + +/** + * 获取文件和检测是否可选 + */ +export const get_files_and_is_max = (res, _extname) => { + let filePaths = [] + let files = [] + if(!_extname || _extname.length === 0){ + return { + filePaths, + files + } + } + res.tempFiles.forEach(v => { + let fileFullName = get_file_ext(v.name) + const extname = fileFullName.ext.toLowerCase() + if (_extname.indexOf(extname) !== -1) { + files.push(v) + filePaths.push(v.path) + } + }) + if (files.length !== res.tempFiles.length) { + uni.showToast({ + title: `当前选择了${res.tempFiles.length}个文件 ，${res.tempFiles.length - files.length} 个文件格式不正确`, + icon: 'none', + duration: 5000 + }) + } + + return { + filePaths, + files + } +} + + +/** + * 获取图片信息 + * @param {Object} filepath + */ +export const get_file_info = (filepath) => { + return new Promise((resolve, reject) => { + uni.getImageInfo({ + src: filepath, + success(res) { + resolve(res) + }, + fail(err) { + reject(err) + } + }) + }) +} +/** + * 获取封装数据 + */ +export const get_file_data = async (files, type = 'image') => { + // 最终需要上传数据库的数据 + let fileFullName = get_file_ext(files.name) + const extname = fileFullName.ext.toLowerCase() + let filedata = { + name: files.name, + uuid: files.uuid, + extname: extname || '', + cloudPath: files.cloudPath, + fileType: files.fileType, + url: files.path || files.path, + size: files.size, //单位是字节 + image: {}, + path: files.path, + video: {} + } + if (type === 'image') { + const imageinfo = await get_file_info(files.path) + delete filedata.video + filedata.image.width = imageinfo.width + filedata.image.height = imageinfo.height + filedata.image.location = imageinfo.path + } else { + delete filedata.image + } + return filedata +} diff --git a/uni_modules/uni-file-picker/package.json b/uni_modules/uni-file-picker/package.json new file mode 100644 index 0000000..08bd66e --- /dev/null +++ b/uni_modules/uni-file-picker/package.json @@ -0,0 +1,86 @@ +{ + "id": "uni-file-picker", + "displayName": "uni-file-picker 文件选择上传", + "version": "1.0.2", + "description": "文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间", + "keywords": [ + "uni-ui", + "uniui", + "图片上传", + "文件上传" +], + "repository": "https://github.com/dcloudio/uni-ui", + "engines": { + "HBuilderX": "" + }, + "directories": { + "example": "../../temps/example_temps" + }, + "dcloudext": { + "category": [ + "前端组件", + "通用组件" + ], + "sale": { + "regular": { + "price": "0.00" + }, + "sourcecode": { + "price": "0.00" + } + }, + "contact": { + "qq": "" + }, + "declaration": { + "ads": "无", + "data": "无", + "permissions": "无" + }, + "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" + }, + "uni_modules": { + "dependencies": ["uni-scss"], + "encrypt": [], + "platforms": { + "cloud": { + "tcb": "y", + "aliyun": "y" + }, + "client": { + "App": { + "app-vue": "y", + "app-nvue": "n" + }, + "H5-mobile": { + "Safari": "y", + "Android Browser": "y", + "微信浏览器(Android)": "y", + "QQ浏览器(Android)": "y" + }, + "H5-pc": { + "Chrome": "y", + "IE": "y", + "Edge": "y", + "Firefox": "y", + "Safari": "y" + }, + "小程序": { + "微信": "y", + "阿里": "y", + "百度": "y", + "字节跳动": "y", + "QQ": "y" + }, + "快应用": { + "华为": "u", + "联盟": "u" + }, + "Vue": { + "vue2": "y", + "vue3": "y" + } + } + } + } +} diff --git a/uni_modules/uni-file-picker/readme.md b/uni_modules/uni-file-picker/readme.md new file mode 100644 index 0000000..c8399a5 --- /dev/null +++ b/uni_modules/uni-file-picker/readme.md @@ -0,0 +1,11 @@ + +## FilePicker 文件选择上传 + +> **组件名：uni-file-picker** +> 代码块： `uFilePicker` + + +文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间 + +### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-file-picker) +#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 \ No newline at end of file