上传图片

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "cnpm": "^6.1.1",
     "core-js": "^3.3.2",
+    "default-passive-events": "^2.0.0",
     "echarts": "^4.8.0",
     "element-ui": "^2.13.2",
     "moment": "^2.27.0",

src/components/uploadImg/uploadImg.vue

@@ -1,21 +1,25 @@
 <template>
     <div>
+        <!-- :action="serverAddress+'/farm-huyang/common/pic'"  photo-->
+        <!-- :action="serverAddress+'/publics/pic/upload'" pic -->
         <el-upload
             class="avatar-uploader"
-            :action="serverAddress+'/farm-huyang/common/pic'"
+            :action="serverAddress+'/publics/pic/upload'"
             :headers="{'x-auth-token': token}"
-            name="photo"
+            name="pic"
+            drag
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
             :before-upload="beforeAvatarUpload"
-            :on-remove="handleRemove"
-            :on-preview="handlePictureCardPreview"
         >
-            <img v-if="imgUrl || imageUrl" :src="imgUrl || imageUrl" class="avatar" />
+            <!-- 
+                drag
+            -->
+            <img v-if="imgUrl" :src="imgUrl" class="avatar" />
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
         <el-dialog :visible.sync="dialogVisible" append-to-body>
-            <img width="100%" :src="imgUrl || imageUrl" alt />
+            <img width="100%" :src="imgUrl" alt />
         </el-dialog>
         <el-link type="primary" @click="dialogVisible=true">查看大图</el-link>
     </div>
@@ -25,12 +29,11 @@
 <script>
 import { reqUploadImg } from "@/api/material.js";
 import config from "@/sdk/config";
-const { serverAddress } = config;
+const { serverAddress, IMG_BASE } = config;
 
 export default {
     data() {
         return {
-            imageUrl: "",
             serverAddress,
             dialogVisible: false
         };
@@ -38,15 +41,16 @@ export default {
     props: {
         value: String
     },
-    watch: {
-        value(v, ov) {
-            console.log(v);
-            this.imageUrl = "";
-        }
-    },
+
     computed: {
         imgUrl() {
-            return this.value;
+            if(this.value) {
+                return IMG_BASE + this.value;
+            } else {
+                return ''
+            }
+            
+            // return this.value;
         }
     },
     beforeCreate() {
@@ -54,29 +58,29 @@ export default {
     },
     created() {},
     methods: {
+        aa(a) {
+            console.log(a);
+        },
         handleAvatarSuccess(res, file) {
-            console.log("===========");
             console.log(res);
             this.$emit("on-msg", res);
-            this.imageUrl = URL.createObjectURL(file.raw);
-        },
-        handleRemove(file, fileList) {
-            console.log(file, fileList);
-        },
-        handlePictureCardPreview(file) {
-            this.dialogImageUrl = file.url;
-            this.dialogVisible = true;
+            // let imageUrl = URL.createObjectURL(file.raw);
+            // console.log(file)
+            // console.log(file.raw)
+            // console.log(imageUrl)
+            // console.log(typeof imageUrl)
         },
         beforeAvatarUpload(file) {
-            // const isJPG = file.type === "image/jpeg";
-            // const isLt2M = file.size / 1024 / 1024 < 2;
-            // if (!isJPG) {
-            //     this.$message.error("上传头像图片只能是 JPG 格式!");
-            // }
-            // if (!isLt2M) {
-            //     this.$message.error("上传头像图片大小不能超过 2MB!");
-            // }
-            // return isJPG && isLt2M;
+            const isJPG = file.type === "image/jpeg" || "image/png";
+            const isLt2M = file.size / 1024 / 1024 <= 10;
+            console.log(file)
+            if (!isJPG) {
+                this.$message.error("上传图片只能是 JPG 或 png 格式!");
+            }
+            if (!isLt2M) {
+                this.$message.error("上传图片大小不能超过 10MB!");
+            }
+            return isJPG && isLt2M;
         }
     }
 };
@@ -103,8 +107,10 @@ export default {
     text-align: center;
 }
 .avatar {
-    width: 178px;
-    height: 178px;
+    // width: 178px;
+    width: 100%;
+    // height: 178px;
+    // height: 100%;
     display: block;
 }
 </style>

src/main.js

@@ -8,6 +8,7 @@ import store from './store'
 import vueModuleLoader from 'vue-module-loader'
 import localModule from './module'
 import './assets/css/reset.scss'
+import 'default-passive-events' // ( https://www.jianshu.com/p/23850d4cade8 )
 import echarts from "echarts";
 import moment from 'moment'
 moment.locale('zh-cn');  // 汉化

src/sdk/config.js

@@ -1,4 +1,6 @@
 export default {
-  serverAddress: 'http://115.238.57.190:8010'
-  
+  // http://192.168.1.6/uploads/20d27b607c8045279f7a41a7defa0d62.jpg
+  // http://115.238.57.190:8888/uploads/20d27b607c8045279f7a41a7defa0d62.jpg
+  serverAddress: 'http://115.238.57.190:8010',
+  IMG_BASE: 'http://115.238.57.190:8888/uploads/'
 }

src/views/harmless/harmlessConfirm.vue

@@ -158,7 +158,11 @@ export default {
                         .then(res => {
                             // 无害化确认列表
                             this.getHarmlessList();
-                            this.$message.success("成功！");
+                            if(res.errCode == "sheepId is wrong") {
+                                this.$message.error(res.errMsg);
+                            } else {
+                                this.$message.success("成功！");
+                            }
                             // this.isShow = false
                         })
                         .catch(err => {