文件上传与下载

src/api/supervise/pcsj.js

@@ -7,7 +7,7 @@ export function tiffUpload(parameter) {
     method: 'post',
     data: parameter,
     headers: {
-      'Content-Type': 'application/json;charset=UTF-8'
+      'Content-Type': 'multipart/form-data;'
     }
   })
 }

src/utils/request.js

@@ -17,7 +17,7 @@ const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: process.env.VUE_APP_BASE_API,
   // 超时
-  timeout: 10000
+  timeout: 1000000
 })
 
 // request拦截器

src/views/remote/farmland/index.vue

@@ -24,7 +24,7 @@
             v-model="queryParams.jcbh"
           >
           </el-input>
-          <el-button>下载</el-button>
+          <el-button @click="handleDownload">下载</el-button>
         </div>
         <div class="numCard">
           <div class="cardItem">
@@ -156,6 +156,10 @@ export default {
   },
 
   methods: {
+    handleDownload() {
+      const zipfile = this.newObj.proxypath + ".zip";
+      window.open(`${zipfile}`);
+    },
     tableClick(row) {
       removeWebGLTile("mapCon1");
       removeWebGLTile("mapCon2");

src/views/remote/satellite/index.vue

@@ -62,7 +62,8 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-upload
+        <el-button @click="upload">上传</el-button>
+        <!-- <el-upload
           class="upload-demo"
           :on-change="handleChange"
           :auto-upload="false"
@@ -83,7 +84,7 @@
           <span class="title-item" style="display: inline-block; width: 100%">{{
             fileList[0].name
           }}</span>
-        </el-tooltip>
+        </el-tooltip> -->
       </el-col>
       <!-- <el-col :span="1.5">
         <el-button
@@ -146,7 +147,7 @@
       <el-table-column label="文件名称" align="center" prop="name" />
       <el-table-column label="区县名称" align="center" prop="xzqmc" />
       <el-table-column
-        label="图斑个数"
+        label="图斑个数(个)"
         align="center"
         prop="spotsnumber"
         width="180"
@@ -156,7 +157,17 @@
         </template> -->
       </el-table-column>
       <el-table-column label="监测面积（亩）" align="center" prop="spotsarea" />
-      <el-table-column label="文件大小" align="center" prop="spotssize" />
+      <el-table-column label="文件大小(MB)" align="center" prop="spotssize">
+        <template slot-scope="scope">
+          <span>{{
+            scope.row.spotssize
+              ? (scope.row.spotssize / 1024 / 1024).toFixed(2)
+              : ""
+          }}</span>
+          <!-- <span>{{ scope.row.spotssize }}</span> -->
+        </template>
+      </el-table-column>
+
       <el-table-column label="录入时间" align="center" prop="filetime" />
       <el-table-column
         label="操作"
@@ -251,6 +262,39 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog
+      title="文件上传"
+      :visible.sync="fileUpload"
+      width="400px"
+      append-to-body
+    >
+      <!-- <el-upload
+        class="upload-demo"
+        :on-change="handleChange"
+        :auto-upload="false"
+        :show-file-list="false"
+        :file-list="fileList"
+        :limit="1"
+        accept=".zip"
+      >
+        <el-button class="upload-btn" icon="Upload" size="mini">上传</el-button>
+      </el-upload> -->
+      <el-upload
+        class="upload-demo"
+        drag
+        :on-change="handleChange"
+        :auto-upload="false"
+        :show-file-list="false"
+        :file-list="fileList"
+        :limit="1"
+        accept=".zip"
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip" slot="tip">只能上传zip文件</div>
+      </el-upload>
+    </el-dialog>
   </div>
 </template>
 
@@ -323,23 +367,29 @@ export default {
       // 表单校验
       rules: {},
       fileList: [],
+      fileUpload: false, //文件上传弹窗
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    upload() {
+      this.fileUpload = true;
+    },
     //上传文件
     handleChange(file, fileList) {
+      console.log(111111);
       if (fileList.length > 0) {
         this.fileList = [fileList[fileList.length - 1]]; //这一步，是展示最后一次选择文件
         this.reset();
       }
+      console.log(file, "filefile");
       const formdata = new FormData();
       formdata.append("file", file.raw);
       tiffUpload(formdata).then((res) => {
         if (res.success) {
-          this.$message(res.message)
+          this.$message(res.message);
         }
       });
     },