+
+
+
+ 压缩比例: {{ compressionRatio.toFixed(1) }}x
+
+
+
+
+
+
+
-
+
@@ -64,7 +85,7 @@ export default {
type: Boolean,
default: false,
},
- // 文件类型, 例如['png', 'jpg', 'jpeg']
+ // 文件类型, 例如['png', 'jpeg', 'jpg']
fileType: {
type: Array,
default: () => ["png", "jpg", "jpeg"],
@@ -73,6 +94,16 @@ export default {
isShowTip: {
type: Boolean,
default: true
+ },
+ // 是否显示压缩设置
+ showCompression: {
+ type: Boolean,
+ default: true
+ },
+ // 默认压缩比例
+ defaultCompressionRatio: {
+ type: Number,
+ default: 0.9
}
},
data() {
@@ -87,9 +118,21 @@ export default {
headers: {
Authorization: "Bearer " + getToken(),
},
- fileList: []
+ fileList: [],
+ // 压缩比例 (0.1-1.0)
+ compressionRatio: this.defaultCompressionRatio
};
},
+ computed: {
+ // 是否显示提示
+ showTip() {
+ return this.isShowTip && (this.fileType || this.fileSize);
+ },
+ // 是否显示压缩设置
+ showCompressionSetting() {
+ return this.showCompression && !this.disabled && this.fileList.length < this.limit;
+ }
+ },
watch: {
value: {
handler(val) {
@@ -114,26 +157,32 @@ export default {
},
deep: true,
immediate: true
+ },
+ // 监听默认压缩比例变化
+ defaultCompressionRatio: {
+ handler(val) {
+ this.compressionRatio = val;
+ },
+ immediate: true
}
},
- computed: {
- // 是否显示提示
- showTip() {
- return this.isShowTip && (this.fileType || this.fileSize);
- },
- },
methods: {
- // 上传前loading加载
- handleBeforeUpload(file) {
+ // 格式化压缩比例显示
+ formatCompressionRatio(value) {
+ return `${value.toFixed(1)}x`;
+ },
+
+ // 上传前验证
+ async handleBeforeUpload(file) {
let isImg = false;
if (this.fileType.length) {
let fileExtension = "";
if (file.name.lastIndexOf(".") > -1) {
- fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
+ fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1).toLowerCase();
}
isImg = this.fileType.some(type => {
if (file.type.indexOf(type) > -1) return true;
- if (fileExtension && fileExtension.indexOf(type) > -1) return true;
+ if (fileExtension && fileExtension === type.toLowerCase()) return true;
return false;
});
} else {
@@ -144,28 +193,151 @@ export default {
this.$modal.msgError(`文件格式不正确，请上传${this.fileType.join("/")}图片格式文件!`);
return false;
}
+
if (file.name.includes(',')) {
this.$modal.msgError('文件名不正确，不能包含英文逗号!');
return false;
}
- if (this.fileSize) {
- const isLt = file.size / 1024 / 1024 < this.fileSize;
- if (!isLt) {
- this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
- return false;
- }
- }
- this.$modal.loading("正在上传图片，请稍候...");
+
+ // 这里只做验证，不限制大小，因为用户可以通过压缩来减小文件大小
+ this.$modal.loading("正在处理图片，请稍候...");
this.number++;
+
+ return true;
},
+
+ // 自定义上传方法，包含压缩逻辑
+ customUpload(options) {
+ const file = options.file;
+
+ // 调用图片压缩方法
+ this.compressImage(file, this.compressionRatio)
+ .then(compressedFile => {
+ // 创建FormData对象，模拟表单提交
+ const formData = new FormData();
+ formData.append('file', compressedFile, file.name);
+
+ // 创建XMLHttpRequest对象
+ const xhr = new XMLHttpRequest();
+ xhr.open('post', this.uploadImgUrl, true);
+
+ // 设置请求头
+ Object.keys(this.headers).forEach(key => {
+ xhr.setRequestHeader(key, this.headers[key]);
+ });
+
+ // 上传进度处理
+ xhr.upload.addEventListener('progress', (e) => {
+ if (e.total > 0) {
+ e.percent = e.loaded / e.total * 100;
+ }
+ options.onProgress(e);
+ });
+
+ // 上传成功处理
+ xhr.addEventListener('load', () => {
+ if (xhr.status >= 200 && xhr.status < 300) {
+ const response = JSON.parse(xhr.responseText);
+ options.onSuccess(response);
+ } else {
+ options.onError(xhr.responseText);
+ }
+ });
+
+ // 上传错误处理
+ xhr.addEventListener('error', () => {
+ options.onError(xhr.responseText);
+ });
+
+ // 发送请求
+ xhr.send(formData);
+ })
+ .catch(error => {
+ this.$modal.msgError('图片压缩失败: ' + error.message);
+ this.$modal.closeLoading();
+ this.number--;
+ options.onError(error);
+ });
+ },
+
+ // 图片压缩核心方法
+ compressImage(file, quality = 0.8) {
+ return new Promise((resolve, reject) => {
+ // 如果不是图片，直接返回原文件
+ if (!file.type.match(/image.*/)) {
+ resolve(file);
+ return;
+ }
+
+ const reader = new FileReader();
+
+ reader.onload = (e) => {
+ const img = new Image();
+
+ img.onload = () => {
+ // 创建canvas元素
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+
+ // 设置canvas尺寸，保持原图比例
+ canvas.width = img.width;
+ canvas.height = img.height;
+
+ // 在canvas上绘制图片
+ ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+ // 获取图片类型
+ const mimeType = file.type || 'image/jpeg';
+
+ // 将canvas内容转为Blob对象
+ canvas.toBlob((blob) => {
+ if (!blob) {
+ reject(new Error('无法压缩图片'));
+ return;
+ }
+
+ // 将Blob转为File对象
+ const compressedFile = new File([blob], file.name, {
+ type: mimeType,
+ lastModified: Date.now()
+ });
+
+ resolve(compressedFile);
+ }, mimeType, quality);
+ };
+
+ img.onerror = (error) => {
+ reject(new Error('无法加载图片进行压缩'));
+ };
+
+ // 加载图片
+ img.src = e.target.result;
+ };
+
+ reader.onerror = (error) => {
+ reject(new Error('无法读取图片文件'));
+ };
+
+ // 读取文件
+ reader.readAsDataURL(file);
+ });
+ },
+
// 文件个数超出
handleExceed() {
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
},
+
// 上传成功回调
handleUploadSuccess(res, file) {
if (res.code === 200) {
- this.uploadList.push({ name: res.name, url: res.fileName,size:res.size,width:res.width,height:res.height });
+ this.uploadList.push({
+ name: res.name,
+ url: res.fileName,
+ size: res.size,
+ width: res.width,
+ height: res.height
+ });
this.uploadedSuccessfully();
} else {
this.number--;
@@ -175,6 +347,7 @@ export default {
this.uploadedSuccessfully();
}
},
+
// 删除图片
handleDelete(file) {
const findex = this.fileList.map(f => f.name).indexOf(file.name);
@@ -183,27 +356,31 @@ export default {
this.$emit("input", this.listToString(this.fileList));
}
},
+
// 上传失败
handleUploadError() {
this.$modal.msgError("上传图片失败，请重试");
this.$modal.closeLoading();
},
+
// 上传结束处理
uploadedSuccessfully() {
if (this.number > 0 && this.uploadList.length === this.number) {
this.fileList = this.fileList.concat(this.uploadList);
- this.$emit('uploadedImg',this.fileList)
+ this.$emit('uploadedImg', this.fileList);
this.uploadList = [];
this.number = 0;
this.$emit("input", this.listToString(this.fileList));
this.$modal.closeLoading();
}
},
+
// 预览
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
+
// 对象转成指定字符串分隔
listToString(list, separator) {
let strs = "";
@@ -213,7 +390,7 @@ export default {
strs += list[i].url.replace(this.baseUrl, "") + separator;
}
}
- return strs != '' ? strs.substr(0, strs.length - 1) : '';
+ return strs !== '' ? strs.substr(0, strs.length - 1) : '';
}
}
};
@@ -223,6 +400,7 @@ export default {
::v-deep.hide .el-upload--picture-card {
display: none;
}
+
// 去掉动画效果
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {
@@ -233,6 +411,21 @@ export default {
opacity: 0;
transform: translateY(0);
}
+
+// 压缩设置样式
+.compression-setting {
+ margin-bottom: 15px;
+ padding: 0 10px 8px 10px;
+ background-color: #f5f7fa;
+ border-radius: 4px;
+
+ .compression-info {
+ margin-top: 8px;
+ font-size: 12px;
+ color: #606266;
+ }
+}
+::v-deep .el-slider__runway{
+ margin:0 !important;
+}
-
-
diff --git a/dl_vue/src/views/base/app/index.vue b/dl_vue/src/views/base/app/index.vue
index 69e26fc..c1d2065 100644
--- a/dl_vue/src/views/base/app/index.vue
+++ b/dl_vue/src/views/base/app/index.vue
@@ -45,7 +45,7 @@
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['base:app:edit']"
- >修改
+ >下载
-
+
+
+
+
@@ -122,7 +125,11 @@ export default {
version: [
{ required: true, message: '请输入版本号', trigger: 'blur' }
],
- }
+ apkUrl: [
+ { required: true, message: '请上传程序包', trigger: 'blur' }
+ ],
+ },
+ baseUrl: process.env.VUE_APP_BASE_API,
};
},
created() {
@@ -148,6 +155,7 @@ export default {
this.form = {
id: null,
version: null,
+ apkUrl: null,
content: null,
creator: null,
createTime: null,
@@ -179,15 +187,18 @@ export default {
this.open = true;
this.title = "添加app版本管理";
},
- /** 修改按钮操作 */
+ /** 下载 */
handleUpdate(row) {
- this.reset();
- const id = row.id || this.ids
- getApp(id).then(response => {
- this.form = response.data;
- this.open = true;
- this.title = "修改app版本管理";
- });
+ let a = document.createElement("a"); // 创建a标签
+ a.style.display = "none";
+ a.href = this.baseUrl + "/web/downloadApk?id="+row.id;
+ a.setAttribute(
+ "download",
+ a.href.split("/")[a.href.split("/").length - 1]
+ ); // 给a标签设置download属性值，为从接口中获取到的需要下载的文件地址
+ document.body.appendChild(a); // 将标签添加到页面
+ a.click();
+ document.body.removeChild(a);
},
/** 提交按钮 */
submitForm() {
diff --git a/dl_vue/src/views/busi/new/newForm.vue b/dl_vue/src/views/busi/new/newForm.vue
index a6429e9..1c49c2e 100644
--- a/dl_vue/src/views/busi/new/newForm.vue
+++ b/dl_vue/src/views/busi/new/newForm.vue
@@ -105,7 +105,7 @@
@@ -184,7 +184,7 @@
-
+
图片库选择
diff --git a/dl_vue/src/views/busi/prod/prodForm.vue b/dl_vue/src/views/busi/prod/prodForm.vue
index 0febbe5..a9dd14d 100644
--- a/dl_vue/src/views/busi/prod/prodForm.vue
+++ b/dl_vue/src/views/busi/prod/prodForm.vue
@@ -102,7 +102,7 @@