|
|
@@ -31,7 +31,7 @@
|
|
|
<van-uploader
|
|
|
v-model="outerImages"
|
|
|
:max-count="5"
|
|
|
- :max-size="10 * 1024 * 1024"
|
|
|
+ :max-size="5 * 1024 * 1024"
|
|
|
:before-read="beforeReadImage"
|
|
|
:preview-full-image="true"
|
|
|
:deletable="true"
|
|
|
@@ -43,7 +43,7 @@
|
|
|
<van-uploader
|
|
|
v-model="innerImages"
|
|
|
:max-count="5"
|
|
|
- :max-size="10 * 1024 * 1024"
|
|
|
+ :max-size="5 * 1024 * 1024"
|
|
|
:before-read="beforeReadImage"
|
|
|
:preview-full-image="true"
|
|
|
:deletable="true"
|
|
|
@@ -117,17 +117,46 @@ const beforeReadImage = (file) => {
|
|
|
return true
|
|
|
}
|
|
|
|
|
|
+
|
|
|
// 提交时上传:这里提供示例函数,后续可替换为真实上传API
|
|
|
const simulateUpload = async (file,type) => {
|
|
|
// 模拟网络耗时
|
|
|
+ const compressedFile = await compressImage(file, 0.5)
|
|
|
const data = new FormData()
|
|
|
- data.set('file',file)
|
|
|
+ data.set('file',compressedFile)
|
|
|
data.set('type',type)
|
|
|
await detailImageUpload(data)
|
|
|
// 返回可预览URL(示例)
|
|
|
return { url: URL.createObjectURL(file) }
|
|
|
}
|
|
|
|
|
|
+const compressImage = (file, quality = 0.5) => {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ const canvas = document.createElement('canvas')
|
|
|
+ const ctx = canvas.getContext('2d')
|
|
|
+ const img = new Image()
|
|
|
+ img.onload = () => {
|
|
|
+ // 计算新尺寸(设置为原来的一半)
|
|
|
+
|
|
|
+ // 设置canvas尺寸
|
|
|
+ canvas.width = img.width
|
|
|
+ canvas.height = img.height
|
|
|
+
|
|
|
+ // 在canvas上绘制调整后的图片
|
|
|
+ ctx.drawImage(img, 0, 0, img.width, img.height)
|
|
|
+ // 将canvas转换为Blob对象
|
|
|
+ canvas.toBlob(resolve, 'image/jpeg', quality)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 读取上传的图片文件
|
|
|
+ const reader = new FileReader()
|
|
|
+ reader.onload = (e) => {
|
|
|
+ img.src = e.target.result
|
|
|
+ }
|
|
|
+ reader.readAsDataURL(file)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
const uploadCategory = async (list, categoryName) => {
|
|
|
// 逐张上传,保持与“单张选择”一致
|
|
|
for (const item of list) {
|