Merge branch 'master' of http://106.12.23.251:10080/CDHABOOK/TEAMModelHTEX

HTEXMarkWeb/ClientApp/package-lock.json

@@ -911,6 +911,14 @@
       "integrity": "sha1-4eguTz6Zniz9YbFhKA0WoRH4ZCg=",
       "dev": true
     },
+    "axios": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz",
+      "integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "http://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz",
@@ -3644,8 +3652,7 @@
     "follow-redirects": {
       "version": "1.13.0",
       "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.0.tgz?cache=0&sync_timestamp=1597057988030&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.13.0.tgz",
-      "integrity": "sha1-tC6Nk6Kn7qXtiGM2dtZZe8jjhNs=",
-      "dev": true
+      "integrity": "sha1-tC6Nk6Kn7qXtiGM2dtZZe8jjhNs="
     },
     "for-in": {
       "version": "1.0.2",

HTEXMarkWeb/ClientApp/package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.20.0",
     "view-design": "^4.4.0-rc.2",
     "vue": "^2.6.10",
     "vue-class-component": "^7.0.2",

HTEXMarkWeb/ClientApp/src/components/Grade.vue

@@ -8,25 +8,88 @@
         <div class="content">
             <div class="uploads">
                 <span>答题卡上传：</span>
-                <Upload multiple action=""
-                        @on-progress="getPhoto">
-                    <Button icon="ios-cloud-upload-outline">上传图片</Button>
-                </Upload>
+                <div class="add-file-right" style="height:70px;margin-left:100px;margin-top:15px;">
+                    <div class="add-file-right-img" style="margin-left:70px;"></div>
+                    <input type="file" ref="clearFile" @change="getFile($event)" multiple="multiplt" class="add-file-right-input" style="margin-left:70px;" accept=".jpg,.png,.bmp,.gif" >
+                    <!--<span class="add-file-right-more">支持扩展名：.doc .docx .pdf </span>-->
+                </div>
+               <div v-if="imgShow.length !== 0">
+                   <ul>
+                       <li v-for="(item,index) in imgShow" :key="index">
+                           <img :src="item" alt="" />
+                       </li>
+                   </ul>
+               </div>
+                <button @click="uploadFile">上传</button>
             </div>
         </div>
     </div>
 </template>
 <script>
-export default {
+    export default {
         data() {
-            return {};
+            return {
+                url: '/file/upload',
+                imgArr: [],
+                imgShow:[]
+            };
         },
         methods: {
             getPhoto(data) {
                 console.log(data)
+            },
+            getFile(data) {
+                let file = data.target.files;
+                let that = this;
+                for (var i = 0; i < file.length; i++) {
+                    // 上传类型判断
+                    var imgName = file[i].name;
+                    var idx = imgName.lastIndexOf(".");
+                    if (idx != -1) {
+                        var ext = imgName.substr(idx + 1).toUpperCase();
+                        ext = ext.toLowerCase();
+                        if (ext != 'jpg' && ext != 'png' && ext != 'bmp' && ext != 'gif') {
+
+                        } else {
+                            that.imgArr.push(file[i]);
+                        }
+                    } else {
+                        this.$Message.warning("图片格式错误")
+                    }
+                    let reader = new FileReader()
+                    reader.readAsDataURL(file[i])
+                    reader.onload = function (e) {
+                    that.imgShow.push(this.result);
+                    }
+                }
+                console.log(this.imgArr)
+            },
+            uploadFile() {
+                if (0 == this.imgArr.length) {
+                    this.$message({
+                        type: 'info',
+                        message: '请选择要上传的文件'
+                    });
+                    return;
+                }
+                let formData = new FormData();
+                for (var i = 0; i < this.imgArr.length; i++) {
+                    formData.append('files', this.imgArr[i]);
+                }
+                let config = {
+                    headers: {
+                        'Content-Type': 'multipart/form-data',
+                    }
+                };
+                this.$axios.post('/file/upload', formData, config)
+                    .then((response) => {
+                        if (response.data.info == "success") {
+                            this.$Message.success( '附件上传成功!');
+                        }
+                    })
             }
-        },
-    };
+        }
+    }
 </script>
 <style scoped>
     .body {

HTEXMarkWeb/ClientApp/src/main.ts

@@ -3,7 +3,10 @@ import App from './App.vue';
 import router from './router';
 import ViewUI from 'view-design';
 import 'view-design/dist/styles/iview.css';
+import axios from 'axios'
 
+
+Vue.prototype.$axios = axios
 Vue.config.productionTip = false;
 Vue.use(ViewUI);
 new Vue({

HTEXMarkWeb/ClientApp/vue.config.js

@@ -0,0 +1,23 @@
+
+module.exports = {
+    runtimeCompiler: true, //是否使用包含运行时编译器的 Vue 构建版本
+    publicPath: '',
+    productionSourceMap: false, //不在production环境使用SourceMap
+    devServer: {
+        host: '127.0.0.1',
+        https: false,
+        hotOnly: false,
+        port: 8080, // 端口号
+        open: true, //配置自动启动浏览器
+        proxy: {
+            // 配置跨域处理 可以设置多个
+            '/file': {
+                target: 'http://localhost:9527',
+                ws: true,
+                changeOrigin: true,
+                
+            }
+
+        }
+    }
+}