|
|
@@ -208,7 +208,7 @@
|
|
|
|
|
|
<script setup>
|
|
|
import util from '@/utils/util.js'
|
|
|
-
|
|
|
+import ImageCompressor from 'compressorjs'
|
|
|
const checkFileUrl = util.checkFileUrl
|
|
|
|
|
|
// 格式化营业时间显示
|
|
|
@@ -409,50 +409,55 @@ const onGetUploadImg = (e) => {
|
|
|
const type = e.target.dataset.type
|
|
|
const resData = []
|
|
|
uni.chooseImage({
|
|
|
- count: 1, // 默认9
|
|
|
+ count: type === 'logo' ? 1 : 9 - logoImgs.value.length, // 默认9
|
|
|
sizeType: ['compressed'],
|
|
|
sourceType: ['album', 'camera'],
|
|
|
// 图片的本地临时文件路径列表
|
|
|
- success (res) {
|
|
|
+ async success (res) {
|
|
|
uni.showLoading({
|
|
|
mask: true
|
|
|
})
|
|
|
- util.getCompressedFileInfo(res.tempFiles[0]).then(async (compressFileInfo) => {
|
|
|
- const { filePath, size } = compressFileInfo
|
|
|
- http.request({
|
|
|
- url: '/p/file/getPreSignUrl',
|
|
|
- method: 'GET',
|
|
|
- data: { fileName: res.tempFiles[0].name, isImFile: false }
|
|
|
- }).then(({ data }) => {
|
|
|
- uni.request({
|
|
|
- url: filePath,
|
|
|
+ res.tempFiles.forEach((item) => {
|
|
|
+ getCompressedFileInfo(item).then(async (compressFileInfo) => {
|
|
|
+ const { filePath, size } = compressFileInfo
|
|
|
+ http.request({
|
|
|
+ url: '/p/file/getPreSignUrl',
|
|
|
method: 'GET',
|
|
|
- responseType: 'arraybuffer',
|
|
|
- success: function (requestRes) {
|
|
|
- uni.request({
|
|
|
- url: data.preSignUrl,
|
|
|
- method: 'PUT',
|
|
|
- header: {
|
|
|
- 'Content-Type': res.tempFiles[0].type
|
|
|
- },
|
|
|
- data: requestRes.data,
|
|
|
- success: function () {
|
|
|
- resData.push({ filePath: data.filePath, fileId: data.fileId, fileSize: size, type: 1 })
|
|
|
- return http.request({
|
|
|
- url: '/p/file/uploadSuccess',
|
|
|
- method: 'PUT',
|
|
|
- data: resData
|
|
|
- }).then(() => {
|
|
|
+ data: { fileName: item.name, isImFile: false }
|
|
|
+ }).then(({ data }) => {
|
|
|
+ uni.request({
|
|
|
+ url: filePath,
|
|
|
+ method: 'GET',
|
|
|
+ responseType: 'arraybuffer',
|
|
|
+ success: (requestRes) => {
|
|
|
+ uni.request({
|
|
|
+ url: data.preSignUrl,
|
|
|
+ method: 'PUT',
|
|
|
+ header: {
|
|
|
+ 'Content-Type': item.type
|
|
|
+ },
|
|
|
+ data: requestRes.data,
|
|
|
+ success: function () {
|
|
|
+ resData.push({ filePath: data.filePath, fileId: data.fileId, fileSize: size, type: 1 })
|
|
|
+ return http.request({
|
|
|
+ url: '/p/file/uploadSuccess',
|
|
|
+ method: 'PUT',
|
|
|
+ data: resData
|
|
|
+ }).then(() => {
|
|
|
+ uni.hideLoading()
|
|
|
+ if (type === 'logoImg') {
|
|
|
+ logoImgs.value = [...logoImgs.value, data.filePath]
|
|
|
+ } else if (type === 'logo') {
|
|
|
+ imgUrl.value = data.filePath
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ complete: function () {
|
|
|
uni.hideLoading()
|
|
|
- if (type === 'logoImg') {
|
|
|
- logoImgs.value = [...logoImgs.value, data.filePath]
|
|
|
- } else if (type === 'logo') {
|
|
|
- imgUrl.value = data.filePath
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
})
|
|
|
})
|
|
|
})
|
|
|
@@ -473,6 +478,85 @@ const onRemoveImage = (e, index) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+/**
|
|
|
+ * 压缩图片文件
|
|
|
+ * @param {file} file 将要压缩的文件
|
|
|
+ * @returns {Promise} 压缩后的文件信息;(H5端返回base64格式图片)
|
|
|
+ */
|
|
|
+const getCompressedFileInfo = (file) => {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ // #ifdef H5
|
|
|
+ compressImage(file).then((compressFile) => {
|
|
|
+ const reader = new FileReader()
|
|
|
+ reader.onload = (event) => {
|
|
|
+ const filePath = event.target.result // Base64 字符串
|
|
|
+ resolve({ filePath, size: compressFile.size })
|
|
|
+ }
|
|
|
+ reader.onerror = (error) => {
|
|
|
+ console.error('转换失败:', error)
|
|
|
+ reject(error)
|
|
|
+ }
|
|
|
+ reader.readAsDataURL(new File([compressFile], file.name, { type: file.type }))
|
|
|
+ })
|
|
|
+ // #endif
|
|
|
+ })
|
|
|
+}
|
|
|
+/**
|
|
|
+ * H5端的压缩图片
|
|
|
+ * @param {File} file - 要压缩的图片文件
|
|
|
+ * @returns {Promise<File>} - 压缩后的图片文件
|
|
|
+ */
|
|
|
+const compressImage = async (file) => {
|
|
|
+ const isSize = file.size / 1024 < 512
|
|
|
+ if (isSize) {
|
|
|
+ return file
|
|
|
+ }
|
|
|
+ // 0.5m~5m,从0.8开始循环。5m~10m,从0.6开始循环。10m以上就直接0.4。
|
|
|
+ // 最低使用0.4
|
|
|
+ let quality
|
|
|
+ if (file.size / 1024 / 1024 < 5) {
|
|
|
+ quality = 0.8
|
|
|
+ } else if (file.size / 1024 / 1024 < 10) {
|
|
|
+ quality = 0.6
|
|
|
+ } else {
|
|
|
+ quality = 0.4
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ let resultBlob
|
|
|
+ let index = true
|
|
|
+ while (index) {
|
|
|
+ resultBlob = await ImageCompressorFn(file, quality)
|
|
|
+ if (resultBlob.size / 1024 < 512 || quality <= 0.4) {
|
|
|
+ index = false
|
|
|
+ } else {
|
|
|
+ quality = (quality * 10 - 2) / 10
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return new File([resultBlob], { type: file.type })
|
|
|
+ } catch (error) {
|
|
|
+ console.error('图片压缩失败:', error)
|
|
|
+ // 返回原文件
|
|
|
+ return file
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const ImageCompressorFn = (file, quality = 0.6) => {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ // eslint-disable-next-line no-new
|
|
|
+ new ImageCompressor(file, {
|
|
|
+ quality,
|
|
|
+ convertSize: 512000,
|
|
|
+ maxWidth: 1080,
|
|
|
+ success (result) {
|
|
|
+ resolve(result)
|
|
|
+ },
|
|
|
+ error (err) {
|
|
|
+ reject(err)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|