Skip to content

Commit

Permalink
Update processIMG.vue
Browse files Browse the repository at this point in the history 
Update to Vue2.x format
  • Loading branch information
@Mintimate
Mintimate committed Jan 20, 2022
1 parent f31bbfc commit bcf28e4
Showing 1 changed file with 91 additions and 60 deletions.
151 changes: 91 additions & 60 deletions OnlineToolFrontEnd/src/views/processIMG.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<div class="row">
<div class="form-group col-md-6 col-lg-3">
<label for="format" class="form-label">图片格式：</label>
<select id="format" ref="format" class="form-select">
<select id="format" v-model="OutPut_IMG_Type" class="form-select">
<option value="None">保存原格式</option>
<option value="PNG">PNG</option>
<option value="JPG">JPG</option>
Expand All @@ -19,7 +19,9 @@
</div>
<div class="form-group col-md-6 col-lg-3">
<label for="compression" class="form-label">图片质量</label>
<select id="compression" ref="compression" class="form-select">
<select id="compression"
v-model="IMG_Mode.compressionMode"
class="form-select">
<option value="1.0f">原图质量</option>
<option value="1.2f">画质增强</option>
<option value="0.8f">原图80%</option>
Expand All @@ -30,37 +32,39 @@
</div>
<div class="form-group col-md-6 col-lg-3">
<label for="mode" class="form-label">尺寸模式</label>
<select @change="changeMenu" id="mode" ref="mode" class="form-select">
<select @change="changeMenu"
id="mode"
v-model="IMG_Mode.sizeMode"
class="form-select">
<option selected value="scale">等比例缩小</option>
<option value="size">缩略图输出</option>
</select>
</div>
<div class="form-group col-md-6 col-lg-3">
<label for="modeDetail" id="modeDetailText" class="form-label">等比例缩小</label>
<select id="modeDetail" ref="modeDetail" class="form-select">
<option selected value="1f">原图尺寸</option>
<option value="0.75f">原图75%</option>
<option value="0.5f">原图50%</option>
<option value="0.25f">原图25%</option>
<label for="modeDetail" id="modeDetailText" class="form-label">
{{ IMG_Mode.modeDetail }}
</label>
<select id="modeDetail" v-model="IMG_Mode.sizeDetail" class="form-select">
<option v-for="item in IMG_Mode.sizeDetailList" :key="item.value" :value="item.value">{{ item.text }}</option>
</select>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<el-card>
<el-upload
ref="upload"
class="upload-demo"
drag
limit="1"
:data="uploadData"
:before-upload="beforeUpload"
:on-success="onSuccess"
:on-error="onError"
:auto-upload="false"
list-type="picture"
action="https://api.tool.mintimate.cn/processIMG/uploadImage"
multiple>
ref="upload"
class="upload-demo"
drag
:limit=1
:data="uploadData"
:before-upload="beforeUpload"
:on-success="onSuccess"
:on-error="onError"
:auto-upload="false"
list-type="picture"
action="/dataApiJava/processIMG/uploadImage"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip pb-3" slot="tip">上传一张jpg/png/webp/bmp图片，且不超过10MB</div>
Expand All @@ -76,10 +80,10 @@
<a :href="outPutIMGPath" class="btn btn-danger">{{ downloadState }}</a>
</div>
</el-card>
<el-card v-show="TypeList!=null">
<el-card v-show="TypeList!=null">
<div class="text-center alert-success col-12 mt-1 mb-3">
AI图片识别分类(^з^)-☆<br>
<strong>{{TypeList}}</strong>
<strong>{{ TypeList }}</strong>
<br>服务器保存24小时后，图片将被自动删除。
<a href="#" @click="delIMG">立即删除</a>
</div>
Expand All @@ -95,18 +99,29 @@ export default {
data() {
return {
uploadData: null,
outPutIMGName:null,
IMG_Mode: {
compressionMode: "0.8f",
modeDetail: "等比缩小",
sizeMode: "scale",
sizeDetail: "1f",
sizeDetailList: [
{value: "1f", text: "原图尺寸"}, {value: "0.75f", text: "原图75%"},
{value: "0.5f", text: "原图50%"}, {value: "0.25f", text: "原图25%"},
],
},
OutPut_IMG_Type:"None",
outPutIMGName: null,
outPutIMGPath: null,
downloadState: null,
TypeList:null
TypeList: null
}
},
methods: {
submitUpload() {
this.$refs.upload.submit();
},
beforeUpload(file) {
const enableType=['image/jpeg','image/webp','image/png','image/bmp']
const enableType = ['image/jpeg', 'image/webp', 'image/png', 'image/bmp']
const isAble = enableType.includes(file.type);
const isLt10M = file.size / 1024 / 1024 < 10;
Expand All @@ -119,10 +134,10 @@ export default {
return isLt10M
}
this.uploadData = {
format: this.$refs.format.value,
compression: this.$refs.compression.value,
mode: this.$refs.mode.value,
modeDetail: this.$refs.modeDetail.value,
format: this.OutPut_IMG_Type,
compression: this.IMG_Mode.compressionMode,
mode: this.IMG_Mode.modeDetail,
modeDetail: this.IMG_Mode.sizeDetail,
};
console.log(this.uploadData);
let promise = new Promise((resolve) => {
Expand All @@ -134,31 +149,37 @@ export default {
},
onSuccess(res) {
this.$message("转码完成，快去下载吧～")
this.outPutIMGName=res.thumbnailPath;
this.outPutIMGPath="/dataApiPython/processIMG/download/"+res.thumbnailPath;
this.outPutIMGName = res.thumbnailPath;
this.outPutIMGPath = "/dataApiJava/processIMG/download/" + res.thumbnailPath;
this.downloadState = "点击下载"
this.TypeList=res.imgType
this.TypeList = res.imgType
},
onError(res){
onError(res) {
this.$message("嗷～出错了!!!请联系开发者……")
},
delIMG(){
get("/dataApiPython/processIMG/delete/"+this.outPutIMGName)
.then(res=>{
this.$message("成功删除！！！")
})
.catch((res) => { //失败的回调
this.$message("删除失败，原因：文件已经被删除～")
})
delIMG() {
get("/dataApiJava/processIMG/delete/" + this.outPutIMGName)
.then(res => {
this.$message("成功删除！！！")
})
.catch((res) => { //失败的回调
this.$message("删除失败，原因：文件已经被删除～")
})
},
changeMenu(){
if (this.$refs.mode.value=="size"){
document.getElementById("modeDetail").innerHTML="<option value=\"1f\">中心100%</option> <option value=\"0.75f\">中心75%</option> <option value=\"0.5f\">中心50%</option>";
document.getElementById("modeDetailText").innerText="缩略图输出";
}
else {
document.getElementById("modeDetail").innerHTML="<option value=\"1f\">原图尺寸</option> <option value=\"0.75f\">原图75%</option> <option value=\"0.5f\">原图50%</option> <option value=\"0.25f\">原图25%</option";
document.getElementById("modeDetailText").innerText="等比例缩小";
changeMenu() {
if (this.IMG_Mode.sizeMode == "size") {
this.IMG_Mode.sizeDetailList = [
{value: "1f", text: "中心100%"}, {value: "0.75f", text: "中心75%"},
{value: "0.5f", text: "中心50%"}
]
this.IMG_Mode.sizeDetail="1f"
this.IMG_Mode.modeDetail = "缩略图输出";
} else {
this.IMG_Mode.sizeDetailList = [
{value: "1f", text: "原图尺寸"}, {value: "0.75f", text: "原图75%"},
{value: "0.5f", text: "原图50%"}, {value: "0.25f", text: "原图25%"},
],
this.IMG_Mode.modeDetail = "等比例缩小";
}
}
}
Expand All @@ -168,37 +189,47 @@ export default {
.el-upload {
display: inline;
}
.el-upload-list--picture .el-upload-list__item-thumbnail{
.el-upload-list--picture .el-upload-list__item-thumbnail {
height: 70px;
width: auto;
}
.el-upload-list--picture .el-upload-list__item{
.el-upload-list--picture .el-upload-list__item {
background-color: var(--board-bg-color);
}
.el-upload-list--picture .el-upload-list__item-name{
.el-upload-list--picture .el-upload-list__item-name {
color: var(--text-color);
}
.el-upload-dragger {
width: 100%;
height: 100%;
}
.el-card__body{
.el-card__body {
background-color: var(--card-color);
}
.el-upload-dragger{
.el-upload-dragger {
background-color: var(--card-color);
}
.el-upload__tip{
color: var( --text-color);
.el-upload__tip {
color: var(--text-color);
}
.el-upload-dragger{
.el-upload-dragger {
height: 18em;
display: inline-block;
}
.el-upload-dragger .el-upload__text {
color: var( --text-color);
color: var(--text-color);
}
.el-upload-dragger .el-icon-upload{
.el-upload-dragger .el-icon-upload {
margin-top: 1.2em;
}
</style>

0 comments on commit bcf28e4

Please sign in to comment.