直接创建项目页面添加上传文件

src/components/cheat/ProjectAdd.vue

@@ -7,23 +7,23 @@
           <el-form :model="project" :rules="rules" ref="project" label-width="12%" class="demo-report">
             <el-form-item label="项目名称" prop="name">
               <el-input v-if="isModifyMode" v-model="project.name"></el-input>
-              <span v-if="!isModifyMode">{{project.name}}</span>
+              <!--<span v-if="!isModifyMode">{{project.name}}</span>-->
             </el-form-item>
             <el-form-item label="项目描述" prop="name">
               <el-input v-if="isModifyMode" v-model="project.description"></el-input>
-              <span v-if="!isModifyMode">{{project.description}}</span>
+              <!--<span v-if="!isModifyMode">{{project.description}}</span>-->
             </el-form-item>
             <el-form-item label="联系人姓名" prop="name">
               <el-input v-if="isModifyMode" v-model="project.contactName"></el-input>
-              <span v-if="!isModifyMode">{{project.contactName}}</span>
+              <!--<span v-if="!isModifyMode">{{project.contactName}}</span>-->
             </el-form-item>
             <el-form-item label="联系人电话" prop="name">
               <el-input v-if="isModifyMode" v-model="project.contactPhone"></el-input>
-              <span v-if="!isModifyMode">{{project.contactPhone}}</span>
+              <!--<span v-if="!isModifyMode">{{project.contactPhone}}</span>-->
             </el-form-item>
             <el-form-item label="项目定价" prop="name">
               <el-input v-if="isModifyMode" v-model="project.price"></el-input>
-              <span v-if="!isModifyMode">{{project.resource}}</span>
+              <!--<span v-if="!isModifyMode">{{project.price}}</span>-->
             </el-form-item>
             <el-form-item label="平台" prop="platform">
               <el-checkbox-group v-if="isModifyMode" v-model="project.platform">
@@ -31,11 +31,11 @@
                 <el-checkbox label="1">ANDROID</el-checkbox>
                 <el-checkbox label="2">WEB</el-checkbox>
               </el-checkbox-group>
-              <span
-                v-if="!isModifyMode"
-                class="badge"
-                v-for="item in project.platform"
-              >{{platformType[item]}}</span>
+              <!--<span-->
+              <!--v-if="!isModifyMode"-->
+              <!--class="badge"-->
+              <!--v-for="item in project.platform"-->
+              <!--&gt;{{platformType[item]}}</span>-->
             </el-form-item>
             <el-form-item label="服务类型" prop="type">
               <el-checkbox-group v-if="isModifyMode" v-model="project.type">
@@ -47,20 +47,21 @@
                 <el-checkbox label="5" name="type">{{serviceType[5]}}</el-checkbox>
                 <el-checkbox label="6" name="type">{{serviceType[6]}}</el-checkbox>
               </el-checkbox-group>
-              <span v-if="!isModifyMode" class="badge" v-for="item in project.type">{{serviceType[item]}}</span>
+              <!--<span v-if="!isModifyMode" class="badge" v-for="item in project.type">{{serviceType[item]}}</span>-->
             </el-form-item>
             <el-form-item prop="file" label="项目需求文档">
               <el-upload
                 v-if="isModifyMode"
                 drag
                 class="upload-demo"
-                action="https://jsonplaceholder.typicode.com/posts/"
+                action=""
                 :on-remove="handleRemove"
                 :before-remove="beforeRemove"
                 multiple
                 :limit="1"
                 :on-exceed="handleExceed"
                 :before-upload="beforeFileUpload"
+                :http-request="uploadRequireDoc"
                 :file-list="project.requireDoc"
               >
                 <i class="el-icon-upload"></i>
@@ -70,24 +71,25 @@
                 </div>
                 <div class="el-upload__tip" slot="tip">请上传报告文件</div>
               </el-upload>
-              <div v-if="!isModifyMode">
-                <span v-if="project.file==null || project.file.length === 0">暂无文件</span>
-                <a :href="project.file[0]" v-if="project.file!=null && project.file.length > 0"><i
-                  class="fa fa-file-text-o"></i>
-                  {{project.file[0]}}</a>
-              </div>
+              <!--<div v-if="!isModifyMode">-->
+              <!--<span v-if="project.file==null || project.file.length === 0">暂无文件</span>-->
+              <!--<a :href="project.file[0]" v-if="project.file!=null && project.file.length > 0"><i-->
+              <!--class="fa fa-file-text-o"></i>-->
+              <!--{{project.file[0]}}</a>-->
+              <!--</div>-->
             </el-form-item>
             <el-form-item prop="file" label="项目待测文件">
               <el-upload
                 v-if="isModifyMode"
                 drag
                 class="upload-demo"
-                action="https://jsonplaceholder.typicode.com/posts/"
+                action=""
                 :on-remove="handleRemove"
                 :before-remove="beforeRemove"
                 multiple
                 :limit="1"
                 :on-exceed="handleExceed"
+                :http-request="uploadApkFile"
                 :before-upload="beforeFileUpload"
                 :file-list="project.file"
               >
@@ -98,12 +100,12 @@
                 </div>
                 <div class="el-upload__tip" slot="tip">请上传报告文件</div>
               </el-upload>
-              <div v-if="!isModifyMode">
-                <span v-if="project.file==null || project.file.length === 0">暂无文件</span>
-                <a :href="project.file[0]" v-if="project.file!=null && project.file.length > 0"><i
-                  class="fa fa-file-text-o"></i>
-                  {{project.file[0]}}</a>
-              </div>
+              <!--<div v-if="!isModifyMode">-->
+              <!--<span v-if="project.file==null || project.file.length === 0">暂无文件</span>-->
+              <!--<a :href="project.file[0]" v-if="project.file!=null && project.file.length > 0"><i-->
+              <!--class="fa fa-file-text-o"></i>-->
+              <!--{{project.file[0]}}</a>-->
+              <!--</div>-->
             </el-form-item>
             <el-form-item label="项目截止时间" prop="datetime">
               <div class="block" v-if="isModifyMode">
@@ -117,10 +119,10 @@
               </div>
               <span v-if="!isModifyMode">{{new Date(project.datetime)}}</span>
             </el-form-item>
-            <el-form-item v-if="!isModifyMode">
-              <div class="btn btn-medium btn-info" @click="modifyInfo()">修改</div>
-              <div class="btn btn-medium" @click="cancelModify()">返回</div>
-            </el-form-item>
+            <!--<el-form-item v-if="!isModifyMode">-->
+            <!--<div class="btn btn-medium btn-info" @click="modifyInfo()">修改</div>-->
+            <!--<div class="btn btn-medium" @click="cancelModify()">返回</div>-->
+            <!--</el-form-item>-->
             <el-form-item v-if="isModifyMode">
               <div class="btn btn-primary btn-info" @click="submitInfo()">确认提交</div>
             </el-form-item>
@@ -130,25 +132,24 @@
           <el-form :model="project" :rules="rules" ref="project" label-width="12%" class="demo-report">
             <el-form-item prop="file" label="Excel模板文件">
               <div>
-                <span v-if="project.file==null || project.file.length === 0">暂无文件</span>
-                <a :href="project.file" v-if="project.file!=null && project.file.length > 0"><i
+                <a :href="downloadFile"><i
                   class="fa fa-file-text-o"></i>
-                  {{project.file[0]}}</a>
+                  {{downloadFile}}</a>
               </div>
             </el-form-item>
-            <el-form-item prop="file" label="Excel文件">
+            <el-form-item type="file" prop="file" label="Excel文件">
               <el-upload
                 v-if="isModifyMode"
                 drag
                 class="upload-demo"
-                action="https://jsonplaceholder.typicode.com/posts/"
+                action=""
                 :on-remove="handleRemove"
                 :before-remove="beforeRemove"
-                multiple
                 :limit="1"
                 :on-exceed="handleExceed"
                 :before-upload="beforeFileUpload"
-                :file-list="project.file"
+                :http-request="uploadProjectCreateExcelFile"
+                :file-list="project.excelFile"
               >
                 <i class="el-icon-upload"></i>
                 <div class="el-upload__text">
@@ -157,11 +158,11 @@
                 </div>
                 <div class="el-upload__tip" slot="tip">请上传报告文件</div>
               </el-upload>
-              <div v-if="!isModifyMode">
-                <span v-if="project.file==null">暂无文件</span>
-                <a :href="project.file" v-if="project.file!=null"><i class="fa fa-file-text-o"></i>
-                  {{project.file}}</a>
-              </div>
+              <!--<div v-if="!isModifyMode">-->
+              <!--<span v-if="project.file==null">暂无文件</span>-->
+              <!--<a :href="project.file" v-if="project.file!=null"><i class="fa fa-file-text-o"></i>-->
+              <!--{{project.file}}</a>-->
+              <!--</div>-->
             </el-form-item>
             <el-form-item v-if="isModifyMode">
               <div class="btn btn-primary btn-info" @click="submitByFile()">确认提交</div>
@@ -189,6 +190,7 @@ export default {
       serviceType: ServiceType,
       platform: PlatformType,
       isFormSubmit: true,
+      downloadFile: '123.xls',
       project: {
         name: '',
         description: '',
@@ -197,7 +199,11 @@ export default {
         platform: [],
         type: [],
         requireDoc: [],
-        file: ['123.xls'],
+        requireDocUrl: '',
+        file: [],
+        fileUrl: '',
+        excelFile: [],
+        excelFileUrl: '',
         price: '',
         datetime: ''
       },
@@ -264,8 +270,8 @@ export default {
         contactPhone: this.project.contactPhone,
         platform: this.project.platform,
         type: this.price.type,
-        requireDoc: this.project.requireDoc[0],
-        file: this.project.file[0],
+        requireDoc: this.project.requireDocUrl,
+        file: this.project.fileUrl,
         price: this.project.price,
         datetime: this.project.datetime
       }
@@ -281,9 +287,9 @@ export default {
         console.log(res)
       })
     },
-    cancelModify () {
-      this.isModifyMode = false
-    },
+    // cancelModify () {
+    //   this.isModifyMode = false
+    // },
     handleRemove (file, fileList) {
       console.log(file, fileList)
     },
@@ -298,9 +304,46 @@ export default {
       return this.$confirm(`确定移除 ${file.name}？`)
     },
     beforeFileUpload () {
+
+    },
+    uploadProjectCreateExcelFile (param) {
+      const formData = new FormData()
+      let config = {
+        //添加请求头
+        headers: {'Content-Type': 'multipart/form-data'},
+      }
+      formData.append('file', param.file)
+      Http.upload(Apis.FILE.REQUIREMENT_FILE.replace('{userId}', 3), formData, config).then((res) => {
+        console.log('上传成功')
+        this.project.requireDocUrl = res.data
+        console.log(res.data)
+      })
+    },
+    uploadRequireDoc (param) {
+      const formData = new FormData()
+      let config = {
+        //添加请求头
+        headers: {'Content-Type': 'multipart/form-data'},
+      }
+      formData.append('file', param.file)
+      Http.upload(Apis.FILE.REQUIREMENT_FILE.replace('{userId}', 3), formData, config).then((res) => {
+        console.log('上传成功')
+        this.project.requireDocUrl = res.data
+        console.log(res.data)
+      })
     },
-    changeSubmitMethod () {
-      this.isFormSubmit = !this.isFormSubmit
+    uploadApkFile (param) {
+      const formData = new FormData()
+      let config = {
+        //添加请求头
+        headers: {'Content-Type': 'multipart/form-data'},
+      }
+      formData.append('file', param.file)
+      Http.upload(Apis.FILE.APK.replace('{userId}', 3), formData, config).then((res) => {
+        console.log('上传成功')
+        this.project.fileUrl = res.data
+        console.log(res)
+      })
     }
   },
   created: function () {

src/js/api.js

@@ -23,6 +23,10 @@ export default {
     DELETE_TASK_REPORT: '/api/project/{projectId}/task/{taskId}/report/{reportId}/',
     DELETE_PROJECT_REPORT: ''
   },
+  FILE: {
+    REQUIREMENT_FILE: '/api/files/requirementfile/{userId}/',
+    APK: '/api/files/apk/{userId}/',
+  },
   USER: {
     ACCEPT_TASK: '',
     ACCEPT_PROJECT: '',

src/js/http.js

@@ -113,83 +113,18 @@ export default {
       )
     })
   },
-  // uploadFile (url, data, response, exception) {
-  //   axios({
-  //     method: 'post',
-  //     url: handleUrl(url),
-  //     data: handleParams(data),
-  //     dataType: 'json',
-  //     processData: false,
-  //     contentType: false
-  //   }).then(
-  //     (result) => {
-  //       response(handleResults(result, data))
-  //     }
-  //   ).catch(
-  //     (error) => {
-  //       if (exception) {
-  //         exception(error)
-  //       } else {
-  //         console.log(error)
-  //       }
-  //     }
-  //   )
-  // },
-  // downloadFile (url, data, fileName, exception) {
-  //   axios({
-  //     method: 'post',
-  //     url: handleUrl(url),
-  //     data: handleParams(data),
-  //     responseType: 'blob'
-  //   }).then(
-  //     (result) => {
-  //       const excelBlob = result.data
-  //       if ('msSaveOrOpenBlob' in navigator) {
-  //         // Microsoft Edge and Microsoft Internet Explorer 10-11
-  //         window.navigator.msSaveOrOpenBlob(excelBlob, fileName)
-  //       } else {
-  //         const elink = document.createElement('a')
-  //         elink.download = fileName
-  //         elink.style.display = 'none'
-  //         const blob = new Blob([excelBlob])
-  //         elink.href = URL.createObjectURL(blob)
-  //         document.body.appendChild(elink)
-  //         elink.click()
-  //         document.body.removeChild(elink)
-  //       }
-  //     }
-  //   ).catch(
-  //     (error) => {
-  //       if (exception) {
-  //         exception(error)
-  //       } else {
-  //         console.log(error)
-  //       }
-  //     }
-  //   )
-  // },
-  // uploadFileFormData (url, data, response, exception) {
-  //   axios({
-  //     method: 'post',
-  //     url: handleUrl(url),
-  //     data: data,
-  //     timeout: TIME_OUT_MS,
-  //     headers: {
-  //       'Content-Type': 'multipart/form-data'
-  //     }
-  //   }).then(
-  //     (result) => {
-  //       response(handleResults(result))
-  //     }
-  //   ).catch(
-  //     (error) => {
-  //       if (exception) {
-  //         exception(error)
-  //       } else {
-  //         console.log(error)
-  //       }
-  //     }
-  //   )
-  // }
+  upload (url, data, config) {
+    return new Promise((resolve, reject) => {
+      axios.post(url, data, config).then(
+        (result) => {
+          resolve(result)
+        }
+      ).catch(
+        (error) => {
+          reject(error)
+        }
+      )
+    })
+  },
 }