1. 图片上传

AutoSprout-ui/src/components/FileUpload/index.vue

@@ -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", // 上传文件服务器地址
+      uploadData: {key:'',token:''},
-      headers: {
+      uploadFileUrl: "https://up-z2.qiniup.com", // 上传文件服务器地址
-        Authorization: "Bearer " + getToken(),
+      // 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();

AutoSprout-ui/src/components/ImageUpload/index.vue

@@ -12,7 +12,7 @@
       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}"
@@ -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", // 上传的图片服务器地址
+      uploadData: {key:'',token:''},
-      headers: {
+      domain:"",
-        Authorization: "Bearer " + getToken(),
+      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:  item, url:  item };
-                  item = { name: this.baseUrl + item, url: this.baseUrl + item };
-              } else {
-                  item = { name: item, url: item };
-              }
             }
             return item;
           });
@@ -154,16 +163,18 @@ export default {
     },
     // 上传成功回调
     handleUploadSuccess(res, file) {
-      if (res.code === 200) {
+      console.log("上传成功回调token："+JSON.stringify(res));
-        this.uploadList.push({ name: res.fileName, url: res.fileName });
+      console.log("上传成功回调file："+JSON.stringify(file));
-        this.uploadedSuccessfully();
+      // if (res.code === 200) {
-      } else {
+      this.uploadList.push({ name: res.hash, url: this.domain+"/"+res.hash });
-        this.number--;
+      this.uploadedSuccessfully();
-        this.$modal.closeLoading();
+      // } else {
-        this.$modal.msgError(res.msg);
+      //   this.number--;
-        this.$refs.imageUpload.handleRemove(file);
+      //   this.$modal.closeLoading();
-        this.uploadedSuccessfully();
+      //   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;
     },

AutoSprout-ui/src/views/plant/classify/index.vue

@@ -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

AutoSprout-ui/src/views/plant/log/index.vue

@@ -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