文件上传 代码提交

src/components/FileUpload/index.vue

@@ -13,12 +13,12 @@
       ref="fileUpload"
     >
       <!-- 上传按钮 -->
-      <el-button size="mini" type="primary">{{btnName}}</el-button>
+      <el-button size="mini" type="primary">{{ btnName }}</el-button>
       <!-- 上传提示 -->
       <div class="el-upload__tip" slot="tip" v-if="showTip">
         请上传
-        <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
-        <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+        <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
+        <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b></template>
         的文件
       </div>
     </el-upload>
@@ -38,13 +38,13 @@
 </template>
 
 <script>
-import { getToken } from "@/utils/auth";
+import {getToken} from "@/utils/auth";
 import {upload} from "@/api/system/public";
 
 export default {
   name: "FileUpload",
   props: {
-    
+
     // 值
     value: [String, Object, Array],
     // 数量限制
@@ -60,14 +60,14 @@ export default {
     // 文件类型, 例如['png', 'jpg', 'jpeg']
     fileType: {
       type: Array,
-      default: () => ["doc", "xls", "ppt", "txt", "pdf","et","zip"],
+      default: () => ["doc", "xls", "ppt", "txt", "pdf", "et", "zip"],
     },
     // 是否显示提示
     isShowTip: {
       type: Boolean,
       default: true
     },
-    btnName:{
+    btnName: {
       type: String,
       default: "选取文件",
     },
@@ -93,7 +93,7 @@ export default {
           // 然后将数组转为对象数组
           this.fileList = list.map(item => {
             if (typeof item === "string") {
-              item = { name: item, url: item };
+              item = {name: item, url: item};
             }
             item.uid = item.uid || new Date().getTime() + temp++;
             return item;
@@ -150,7 +150,7 @@ export default {
     // 上传成功回调
     handleUploadSuccess(res, file) {
       if (res.code === 200) {
-        this.uploadList.push({ name: res.data.url, url: res.data.url });
+        this.uploadList.push({name: res.data.url, url: res.data.url});
         this.uploadedSuccessfully();
       } else {
         this.number--;
@@ -185,19 +185,19 @@ export default {
     },
 
     //自定义上传方式(自带的成功回调及失败回调会失效)
-    uploadFile(fileObj){
-      console.log(fileObj,'fileObj')
+    uploadFile(fileObj) {
+      console.log(fileObj, 'fileObj')
       let formData = new FormData();
-      formData.append('file',fileObj.file);
-      upload(formData,'image').then(res=>{
+      formData.append('file', fileObj.file);
+      upload(formData, 'image').then(res => {
         /*上传成功*/
         this.$modal.closeLoading();
-        let imgUrl = process.env.VUE_APP_BASE_API + res.data.url;
+        //let imgUrl = process.env.VUE_APP_BASE_API + res.data.url;
         let arr = [];
-        arr.push({ name: res.data.name, url: imgUrl})
+        arr.push({name: res.data.name, url: res.data.url})
         this.fileList = arr;
         this.$emit("input", this.listToString(this.fileList));
-      }).catch(err=>{
+      }).catch(err => {
         /*上传失败*/
         this.$modal.closeLoading();
         this.uploadedSuccessfully();
@@ -213,7 +213,8 @@ export default {
       for (let i in list) {
         strs += list[i].url + separator;
       }
-      return strs != '' ? strs.substr(0, strs.length - 1) : '';
+
+      return strs != '' ? strs.substring(0, strs.length - 1) : '';
     }
   }
 };
@@ -223,18 +224,21 @@ export default {
 .upload-file-uploader {
   margin-bottom: 5px;
 }
+
 .upload-file-list .el-upload-list__item {
   border: 1px solid #e4e7ed;
   line-height: 2;
   margin-bottom: 10px;
   position: relative;
 }
+
 .upload-file-list .ele-upload-list__item-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: inherit;
 }
+
 .ele-upload-list__item-content-action .el-link {
   margin-right: 10px;
 }

src/views/core/materials/index.vue

@@ -4,7 +4,7 @@
       <!--机构数据-->
       <el-col :span="4" :xs="24">
         <k-org-tree v-model="queryParams.orgId" @defaultKey="getDefaultKey" @checkChange="checkChange"
-                  @click="clickTreeNode"></k-org-tree>
+                    @click="clickTreeNode"></k-org-tree>
       </el-col>
       <!--用户数据-->
       <el-col :span="20" :xs="24">
@@ -100,14 +100,14 @@
           </el-table-column>
           <el-table-column label="上传人" align="center" prop="createBy"/>
           <el-table-column label="上传时间" align="center" prop="createTime"/>
-          <el-table-column label="附件" align="center" prop="file"/>
+          <el-table-column label="附件" align="center" prop="fileList"/>
           <el-table-column label="备注" align="center" prop="remark"/>
 
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template slot-scope="scope">
               <!-- 公开 按钮显示逻辑: 仅当前用户上传的学习资料且处于未公开状态-->
               <el-button
-                v-if="checkCanEditOpen(scope.row)&&scope.row.isOpen===0"
+                v-if="checkCanEditOpen(scope.row)&&scope.row.isOpen==0"
                 size="mini"
                 type="text"
                 icon="el-icon-edit"
@@ -176,8 +176,8 @@
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注"/>
         </el-form-item>
-        <el-form-item label="附件" prop="file">
-          <file-upload v-model="form.file"/>
+        <el-form-item label="附件" prop="fileList">
+          <file-upload ref="upload" @input="getFileList" v-model="form.fileList"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -185,6 +185,7 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    c
   </div>
 </template>
 
@@ -205,7 +206,7 @@ import kOrgTree from "@/components/k-orgTree/index.vue";
 
 export default {
   name: "Materials",
-  components: {OrgTree,kOrgTree},
+  components: {OrgTree, kOrgTree},
   data() {
     return {
       // 遮罩层
@@ -245,10 +246,10 @@ export default {
         content: null,
         orgId: null,
         isOpen: null,
-        file: null
       },
       // 表单参数
       form: {},
+
       // 表单校验
       rules: {},
       //默认选中节点
@@ -260,7 +261,8 @@ export default {
       }, {
         label: "未公开",
         value: 0
-      }]
+      }],
+      fileList: []
     };
   },
   watch: {
@@ -291,12 +293,19 @@ export default {
         this.deptOptions = response.data;
       });
     },
-
+    getFileList() {
+      //循环获取this.$refs.upload.fileList中的name和url，放到 this.form.fileList中去
+      let fileList = [];
+      for (let i = 0; i < this.$refs.upload.fileList.length; i++) {
+        fileList.push({name: this.$refs.upload.fileList[i].name, url: this.$refs.upload.fileList[i].url})
+      }
+      this.fileList = JSON.stringify(fileList);
+    },
     checkCanEditOrDel(row) {
-      return row.createBy === this.$store.getters.userId && row.isOpen === 0;
+      return row.createId == this.$store.getters.userId && row.isOpen == 0;
     },
     checkCanEditOpen(row) {
-      return row.createBy === this.$store.getters.userId;
+      return row.createId == this.$store.getters.userId;
     },
 
     // 节点单击事件
@@ -321,11 +330,9 @@ export default {
         knowledgeId: null,
         content: null,
         orgId: this.queryParams.orgId,
-        orgName: this.queryParams.orgName,
-        orgPath: this.queryParams.orgPath,
         isOpen: null,
-        file: null,
         remark: null,
+        fileList: null,
       };
       this.resetForm("form");
       this.initKnowledgeList();
@@ -417,6 +424,9 @@ export default {
       this.reset();
       const id = row.id || this.ids
       getMaterials(id).then(response => {
+        let fileList = response.data.fileList;
+        this.form.fileList = JSON.parse(fileList);
+        this.$emit("input", this.listToString(this.form.fileList));
         this.form = response.data;
         this.open = true;
         this.title = "修改学习资料";
@@ -424,9 +434,11 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
+
       this.$refs["form"].validate(valid => {
-        console.log("this.form",this.form)
         if (valid) {
+          this.form.fileList = this.fileList;
+          console.log('55555', this.form.fileList)
           if (this.form.id != null) {
             updateMaterials(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
@@ -443,6 +455,14 @@ export default {
         }
       });
     },
+    listToString(list, separator) {
+      let strs = "";
+      separator = separator || ",";
+      for (let i in list) {
+        strs += list[i].url + separator;
+      }
+      return strs != '' ? strs.substring(0, strs.length - 1) : '';
+    },
     /** 导出按钮操作 */
     handleExport() {
       this.download('core/materials/export', {