chuangte/autosprout
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1. 图片上传

Browse Source
This commit is contained in:
邱贞招 2024-04-01 19:42:42 +08:00
parent 8f91a75244
commit e87f5e3520
4 changed files with 61 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
AutoSprout-ui/src/components/FileUpload/index.vue
View File

@ -10,7 +10,7 @@
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
:show-file-list="false"
:headers="headers"
:data="uploadData"
class="upload-file-uploader"
ref="fileUpload"
>
@ -41,6 +41,7 @@
<script>
import { getToken } from "@/utils/auth";
import { getQiniuToken } from "@/api/common/common";
export default {
name: "FileUpload",
@ -73,13 +74,22 @@ export default {
number: 0,
uploadList: [],
baseUrl: process.env.VUE_APP_BASE_API,
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
headers: {
Authorization: "Bearer " + getToken(),
},
uploadData: {key:'',token:''},
uploadFileUrl: "https://up-z2.qiniup.com", // 上传文件服务器地址
// headers: {
// Authorization: "Bearer " + getToken(),
// },
fileList: [],
};
},
mounted() {
getQiniuToken().then((res)=> {
console.log("七牛云获取token"+JSON.stringify(res));
if (res.code === 200) {
this.uploadData.token = res.token
}
})
},
watch: {
value: {
handler(val) {
@ -146,6 +156,8 @@ export default {
},
// 上传成功回调
handleUploadSuccess(res, file) {
console.log("七牛云获取res"+JSON.stringify(res));
console.log("七牛云获取file"+JSON.stringify(file));
if (res.code === 200) {
this.uploadList.push({ name: res.fileName, url: res.fileName });
this.uploadedSuccessfully();

58
AutoSprout-ui/src/components/ImageUpload/index.vue
View File

@ -12,14 +12,14 @@
ref="imageUpload"
:on-remove="handleDelete"
:show-file-list="true"
:headers="headers"
:data='uploadData'
:file-list="fileList"
:on-preview="handlePictureCardPreview"
:class="{hide: this.fileList.length >= this.limit}"
>
<i class="el-icon-plus"></i>
</el-upload>
<!-- 上传提示 -->
<div class="el-upload__tip" slot="tip" v-if="showTip">
请上传
@ -44,6 +44,7 @@
<script>
import { getToken } from "@/utils/auth";
import {getQiniuToken} from "@/api/common/common";
export default {
props: {
@ -77,13 +78,25 @@ export default {
dialogVisible: false,
hideUpload: false,
baseUrl: process.env.VUE_APP_BASE_API,
uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
headers: {
Authorization: "Bearer " + getToken(),
},
uploadData: {key:'',token:''},
domain:"",
uploadImgUrl:"https://up-z2.qiniup.com", // 上传的图片服务器地址
// headers: {
// Authorization: "Bearer " + getToken(),
// },
fileList: []
};
},
mounted(){
getQiniuToken().then(res => {
debugger
console.log("获取到七牛云token："+JSON.stringify(res));
if (res.code === 200) {
this.uploadData.token = res.token;
this.domain = res.domain;
}
})
},
watch: {
value: {
handler(val) {
@ -93,11 +106,7 @@ export default {
// 然后将数组转为对象数组
this.fileList = list.map(item => {
if (typeof item === "string") {
if (item.indexOf(this.baseUrl) === -1) {
item = { name: this.baseUrl + item, url: this.baseUrl + item };
} else {
item = { name: item, url: item };
}
item = { name: item, url: item };
}
return item;
});
@ -154,16 +163,18 @@ export default {
},
// 上传成功回调
handleUploadSuccess(res, file) {
if (res.code === 200) {
this.uploadList.push({ name: res.fileName, url: res.fileName });
this.uploadedSuccessfully();
} else {
this.number--;
this.$modal.closeLoading();
this.$modal.msgError(res.msg);
this.$refs.imageUpload.handleRemove(file);
this.uploadedSuccessfully();
}
console.log("上传成功回调token："+JSON.stringify(res));
console.log("上传成功回调file："+JSON.stringify(file));
// if (res.code === 200) {
this.uploadList.push({ name: res.hash, url: this.domain+"/"+res.hash });
this.uploadedSuccessfully();
// } else {
// this.number--;
// this.$modal.closeLoading();
// this.$modal.msgError(res.msg);
// this.$refs.imageUpload.handleRemove(file);
// this.uploadedSuccessfully();
// }
},
// 删除图片
handleDelete(file) {
@ -180,7 +191,9 @@ export default {
},
// 上传结束处理
uploadedSuccessfully() {
if (this.number > 0 && this.uploadList.length === this.number) {
console.log("this.number："+this.number);
console.log("this.uploadList.length："+this.uploadList.length);
if (this.number > 0) {
this.fileList = this.fileList.concat(this.uploadList);
this.uploadList = [];
this.number = 0;
@ -190,6 +203,7 @@ export default {
},
// 预览
handlePictureCardPreview(file) {
console.log("预览："+JSON.stringify(file));
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},

2
AutoSprout-ui/src/views/plant/classify/index.vue
View File

@ -71,7 +71,7 @@
</template>
</el-table-column>
<el-table-column label="植物数" align="center" prop="plantNum" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="备注" align="center" :show-overflow-tooltip="true" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button

72
AutoSprout-ui/src/views/plant/log/index.vue
View File

@ -7,57 +7,17 @@
</el-form-item>
</el-form>
<!-- <el-row :gutter="10" class="mb8">-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- plain-->
<!-- icon="el-icon-plus"-->
<!-- size="mini"-->
<!-- @click="handleAdd"-->
<!-- v-hasPermi="['device:log:add']"-->
<!-- >新增</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="success"-->
<!-- plain-->
<!-- icon="el-icon-edit"-->
<!-- size="mini"-->
<!-- :disabled="single"-->
<!-- @click="handleUpdate"-->
<!-- v-hasPermi="['device:log:edit']"-->
<!-- >修改</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="danger"-->
<!-- plain-->
<!-- icon="el-icon-delete"-->
<!-- size="mini"-->
<!-- :disabled="multiple"-->
<!-- @click="handleDelete"-->
<!-- v-hasPermi="['device:log:remove']"-->
<!-- >删除</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="warning"-->
<!-- plain-->
<!-- icon="el-icon-download"-->
<!-- size="mini"-->
<!-- @click="handleExport"-->
<!-- v-hasPermi="['device:log:export']"-->
<!-- >导出</el-button>-->
<!-- </el-col>-->
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
<!-- </el-row>-->
<el-table v-loading="loading" :data="logList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="id" align="center" prop="id" />
<!-- <el-table-column label="id" align="center" prop="id" />-->
<el-table-column label="用户ID" align="center" prop="userId" />
<el-table-column label="url" align="center" prop="url" />
<!-- <el-table-column label="url" align="center" prop="url" />-->
<el-table-column label="图片" align="center" prop="url" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.url" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column label="百度识别返回" align="center" prop="response" :show-overflow-tooltip="true"/>
<el-table-column label="消息" align="center" prop="msg" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
@ -65,24 +25,6 @@
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-edit"-->
<!-- @click="handleUpdate(scope.row)"-->
<!-- v-hasPermi="['device:log:edit']"-->
<!-- >修改</el-button>-->
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-delete"-->
<!-- @click="handleDelete(scope.row)"-->
<!-- v-hasPermi="['device:log:remove']"-->
<!-- >删除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
<pagination