项目添加上传文件功能

src/components/project/Project.vue

@@ -6,7 +6,7 @@
       <div v-if="!isModifyMode" class="el-form-item">
         <label class="el-form-item__label" style="width: 12%;">编号</label>
         <div class="el-form-item__content" style="margin-left: 12%;">
-          <div>{{project.id}}</div>
+          <div>{{projectId}}</div>
         </div>
       </div>
       <el-form :model="project" :rules="rules" ref="project" label-width="12%" class="demo-project">
@@ -124,10 +124,16 @@
         <el-form-item label="需求文档" prop="doc">
           <el-upload
             v-if="isModifyMode"
-            class="upload-demo"
             drag
-            action="https://jsonplaceholder.typicode.com/posts/"
-            multiple
+            class="upload-demo"
+            action=""
+            :on-remove="handleRemove"
+            :before-remove="beforeRemove"
+            :limit="1"
+            :on-exceed="handleExceed"
+            :before-upload="beforeFileUpload"
+            :http-request="uploadRequireDoc"
+            :file-list="project.doc"
           >
             <i class="el-icon-upload"></i>
             <div class="el-upload__text">
@@ -136,16 +142,21 @@
             </div>
             <div class="el-upload__tip" slot="tip">请上传需求文档</div>
           </el-upload>
-          <span v-if="!isModifyMode"><a :href="project.doc">{{project.doc}}</a></span>
+          <span v-if="!isModifyMode"><a :href="project.requireDocUrl">{{project.requireDocUrl}}</a></span>
         </el-form-item>
         <el-form-item label="安装包" prop="file">
           <el-upload
             v-if="isModifyMode"
-            class="upload-demo"
             drag
-            action="https://jsonplaceholder.typicode.com/posts/"
-            multiple
+            class="upload-demo"
+            action=""
+            :on-remove="handleRemove"
+            :before-remove="beforeRemove"
+            :limit="1"
+            :on-exceed="handleExceed"
             :before-upload="beforeFileUpload"
+            :http-request="uploadApkFile"
+            :file-list="project.file"
           >
             <i class="el-icon-upload"></i>
             <div class="el-upload__text">
@@ -154,7 +165,7 @@
             </div>
             <div class="el-upload__tip" slot="tip">只能上传Android或IOS安装包文件</div>
           </el-upload>
-          <span v-if="!isModifyMode"><a :href="project.file">{{project.file}}</a></span>
+          <span v-if="!isModifyMode"><a :href="project.fileUrl">{{project.fileUrl}}</a></span>
         </el-form-item>
         <el-form-item label="项目截止时间" prop="datetime">
           <div class="block" v-if="isModifyMode">
@@ -315,7 +326,26 @@ export default {
       platformType: PlatformType,
       resourceType: ResourceType,
       serviceType: ServiceType,
-      project: {},
+      project: {
+        userId: 0,
+        name: '',
+        type: '',
+        platform: '',
+        desc: '',
+        resource: '',
+        location: '',
+        institution: '',
+        contactName: '',
+        contactPhone: '',
+        doc: [],
+        requireDocUrl: '',
+        file: [],
+        fileUrl: '',
+        budget: '',
+        price: '',
+        datetime: '',
+        usage: '',
+      },
       task: [],
       analyseDemandList: [],
       pickerOptions: {
@@ -440,8 +470,8 @@ export default {
         institution: this.project.institution,
         contactName: this.project.contactName,
         contactPhone: this.project.contactPhone,
-        doc: 'asd',
-        file: 'asd',
+        doc: this.project.requireDocUrl,
+        file: this.project.fileUrl,
         budget: this.project.budget,
         price: this.project.price,
         datetime: this.project.datetime,
@@ -486,21 +516,21 @@ export default {
       //获得update 信息
       //this.loadData()
     },
-    submitProjectRequest(){
+    submitProjectRequest () {
       const data = {
         userId: 3,
-        projectId:this.projectId
+        projectId: this.projectId
       }
-      Http.post(Apis.USER.SUBMIT_PROJECT_REQUEST,data).then((res)=>{
+      Http.post(Apis.USER.SUBMIT_PROJECT_REQUEST, data).then((res) => {
         console.log(res)
       })
     },
-    applyProject(){
+    applyProject () {
       const data = {
         userId: 3,
-        projectId:this.projectId
+        projectId: this.projectId
       }
-      Http.post(Apis.USER.ACCEPT_PROJECT,data).then((res)=>{
+      Http.post(Apis.USER.ACCEPT_PROJECT, data).then((res) => {
         console.log(res)
       })
     },
@@ -552,8 +582,26 @@ export default {
     },
     loadData () {//PROJ--2019073114009
       Http.get(Apis.PROJECT.GET_PROJECT.replace('{projectId}', this.projectId)).then((res) => {
-        console.log(res)
-        this.project = res.projectDetails
+        //console.log(res)
+        this.projectId = res.projectDetails.id
+        this.project.name = res.projectDetails.name
+        this.project.contactName = res.projectDetails.contactName
+        this.project.contactPhone = res.projectDetails.contactPhone
+        this.project.type = res.projectDetails.type
+        this.project.platform = res.projectDetails.platform
+        this.project.desc = res.projectDetails.desc
+        this.project.doc = []
+        this.project.file = []
+        this.project.resource = res.projectDetails.resource
+        this.project.location = res.projectDetails.location
+        this.project.institution = res.projectDetails.institution
+        this.project.datetime = new Date(res.projectDetails.datetime)
+        this.project.price = res.projectDetails.price
+        this.project.budget = res.projectDetails.budget
+        this.project.usage = res.projectDetails.usage
+        this.project.fileUrl = res.projectDetails.file
+        this.project.requireDocUrl = res.projectDetails.doc
+
         this.task = res.taskList
         this.analyseDemandList = res.reportList
       })
@@ -563,6 +611,45 @@ export default {
         this.project.location = {provinceCode: provinceId, cityCode: cityId}
       }
     },
+    handleRemove (file, fileList) {
+      console.log(file, fileList)
+    },
+    handleExceed (files, fileList) {
+      this.$message.warning(
+        `当前限制选择 1 个文件，本次选择了 ${
+          files.length
+          } 个文件，共选择了 ${files.length + fileList.length} 个文件`
+      )
+    },
+    beforeRemove (file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`)
+    },
+    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)
+      })
+    },
+    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)
+      })
+    }
   }
 }
 </script>

src/components/project/ProjectCreate.vue

@@ -89,10 +89,16 @@
         </el-form-item>
         <el-form-item label="需求文档" prop="doc">
           <el-upload
-            class="upload-demo"
             drag
-            action="https://jsonplaceholder.typicode.com/posts/"
-            multiple
+            class="upload-demo"
+            action=""
+            :on-remove="handleRemove"
+            :before-remove="beforeRemove"
+            :limit="1"
+            :on-exceed="handleExceed"
+            :before-upload="beforeFileUpload"
+            :http-request="uploadRequireDoc"
+            :file-list="project.doc"
           >
             <i class="el-icon-upload"></i>
             <div class="el-upload__text">
@@ -104,11 +110,16 @@
         </el-form-item>
         <el-form-item label="安装包" prop="file">
           <el-upload
-            class="upload-demo"
             drag
-            action="https://jsonplaceholder.typicode.com/posts/"
-            multiple
+            class="upload-demo"
+            action=""
+            :on-remove="handleRemove"
+            :before-remove="beforeRemove"
+            :limit="1"
+            :on-exceed="handleExceed"
             :before-upload="beforeFileUpload"
+            :http-request="uploadApkFile"
+            :file-list="project.file"
           >
             <i class="el-icon-upload"></i>
             <div class="el-upload__text">
@@ -353,6 +364,45 @@ export default {
       Http.get(Apis.PAGE.PROJECT_DETAIL_PAGE).then((res) => {
         this.project = res.project
       })
+    },
+    handleRemove (file, fileList) {
+      console.log(file, fileList)
+    },
+    handleExceed (files, fileList) {
+      this.$message.warning(
+        `当前限制选择 1 个文件，本次选择了 ${
+          files.length
+          } 个文件，共选择了 ${files.length + fileList.length} 个文件`
+      )
+    },
+    beforeRemove (file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`)
+    },
+    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)
+      })
+    },
+    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)
+      })
     }
   }
 }