上传图片公共组件初步完成

src/api/material.js

@@ -32,5 +32,5 @@ export const reqDelMOutStore = (id) => ajax("post", "/farm-huyang/stockOut/delet
 
 
 /* 图片上传 */
-export const reqUploadImg = (data) => upload("/farm-huyang/common/pic", data)
+// export const reqUploadImg = (data) => upload("/farm-huyang/common/pic", data)
 

src/components/uploadImg/uploadImg.vue

@@ -1,15 +1,17 @@
 <template>
     <div>
+        <!-- :action="http://115.238.57.190:8010/farm-huyang/common/pic" -->
         <el-upload
             class="avatar-uploader"
-            action="http://115.238.57.190:8010/farm-huyang/common/pic"
+            :action="serverAddress+'/farm-huyang/common/pic'"
             :headers="{'x-auth-token': token}"
             name="photo"
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
             :before-upload="beforeAvatarUpload"
         >
-            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+            <img v-if="imgUrl || imageUrl" :src="imgUrl || imageUrl" class="avatar" />
+            <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
     </div>
@@ -18,13 +20,16 @@
 
 <script>
 import { reqUploadImg } from "@/api/material.js";
+import config from '@/sdk/config'
+const { serverAddress } = config
 // http://192.168.1.5:8016/files/2ceed3f6bfbfd9fc6d6c9b8c455158ec-1000.jpg  $attrs.value
 // http://192.168.1.5:8016/files/v2-996be5e52e4b43d08ae6ca8cae80b0fd_r.jpg
 // http://192.168.1.5:8016/files/v2-a862735c06feb9edce4369859daf5c12_r.jpg
 export default {
     data() {
         return {
-            imageUrl: ""
+            imageUrl: "",
+            serverAddress
         };
     },
     props: {
@@ -33,6 +38,7 @@ export default {
     watch: {
         value(v, ov) {
             console.log(v);
+            this.imageUrl = ''
         }
     },
     computed: {
@@ -45,40 +51,23 @@ export default {
     },
     created() {},
     methods: {
-        beforeUpload(file) {
-            // let formData = new FormData();
-            // formData.append("photo", file);
-            // reqUploadImg(formData)
-            //     .then(res => {
-            //         console.log(res);
-            //         // this.$attrs.value = res
-            //         // this.value = res;
-            //         this.dialogImageUrl = res;
-            //         this.$emit("on-msg", res);
-            //         // this.$set(this, 'value', res)
-            //         console.log();
-            //     })
-            //     .catch(err => {
-            //         console.log(err);
-            //     });
-            // return false;
-        },
         handleAvatarSuccess(res, file) {
             console.log('===========')
             console.log(res)
+            this.$emit("on-msg", res);
             this.imageUrl = URL.createObjectURL(file.raw);
         },
         beforeAvatarUpload(file) {
-            const isJPG = file.type === "image/jpeg";
-            const isLt2M = file.size / 1024 / 1024 < 2;
+            // 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;
+            // if (!isJPG) {
+            //     this.$message.error("上传头像图片只能是 JPG 格式!");
+            // }
+            // if (!isLt2M) {
+            //     this.$message.error("上传头像图片大小不能超过 2MB!");
+            // }
+            // return isJPG && isLt2M;
         }
     }
 };

src/sdk/ajax.js

@@ -67,29 +67,29 @@ export const ajax = function (type = "post", url, params) {
 
 
 
-export const upload = function (url, data) {
-    let token = localStorage.getItem("token")
-    return new Promise((resole, reject) => {
-        axios({
-            method: 'POST',
-            url: serverAddress + url,
-            data,
-            headers: {
-                'Content-Type': 'multipart/form-data',
-                'x-auth-token': token
-            }
-        }).then((res) => {
-            switch (res.data.errCode) {
-                case 'request_not_authorize': // 登录过期
-                    let url = window.location.protocol + "//" + window.location.host + "/#/login"
-                    window.location.replace(url)
-                    break;
-            }
-            resole(res.data);
-        }).catch((err) => {
-            reject(err);
-        });
-    });
-}
+// export const upload = function (url, data) {
+//     let token = localStorage.getItem("token")
+//     return new Promise((resole, reject) => {
+//         axios({
+//             method: 'POST',
+//             url: serverAddress + url,
+//             data,
+//             headers: {
+//                 'Content-Type': 'multipart/form-data',
+//                 'x-auth-token': token
+//             }
+//         }).then((res) => {
+//             switch (res.data.errCode) {
+//                 case 'request_not_authorize': // 登录过期
+//                     let url = window.location.protocol + "//" + window.location.host + "/#/login"
+//                     window.location.replace(url)
+//                     break;
+//             }
+//             resole(res.data);
+//         }).catch((err) => {
+//             reject(err);
+//         });
+//     });
+// }