upload pic

app/controller/v1/example.js

@@ -2,6 +2,8 @@
 
 const BaseController = require('../base'); 
 const os = require('os');
+const fs = require('fs');
+const path = require('path');
 
 class ExampleController extends BaseController {
 
@@ -31,6 +33,37 @@ class ExampleController extends BaseController {
 
     self.sendSuccess(data);
   }
+
+  async uploadFile() {
+    const self = this;
+    const { ctx, service } = this;
+    let tmpDir = service.storage.getStorageDir();
+    // for (const file of ctx.request.files) {
+    //   this.app.logger.info('file:', file);
+
+    //   try {
+    //     let tmpFile = fs.readFileSync(file.filepath) 
+    //     fs.writeFileSync(path.join(tmpDir, file.filename), tmpFile)
+    //   } finally {
+    //     await fs.unlink(file.filepath, function(){});
+    //   }
+    //   const fileStream = fs.createReadStream(path.join(tmpDir, file.filename)) 
+    //   const uploadRes = await service.example.uploadFileToSMMS(fileStream);
+    // }
+    const file = ctx.request.files[0];
+    this.app.logger.info('file:', file);
+
+    try {
+      let tmpFile = fs.readFileSync(file.filepath) 
+      fs.writeFileSync(path.join(tmpDir, file.filename), tmpFile)
+    } finally {
+      await fs.unlink(file.filepath, function(){});
+    }
+    const fileStream = fs.createReadStream(path.join(tmpDir, file.filename)) 
+    const uploadRes = await service.example.uploadFileToSMMS(fileStream);
+
+    self.sendData(uploadRes);
+  }
 }
 
 module.exports = ExampleController;

app/router/example.js

@@ -7,4 +7,6 @@ module.exports = app => {
   const { router, controller } = app;
   // open local dir
   router.post('/api/v1/example/openLocalDir', controller.v1.example.openLocalDir);
+  // upload file
+  router.post('/api/v1/example/uploadFile', controller.v1.example.uploadFile);
 };

app/service/example.js

@@ -1,6 +1,8 @@
 'use strict';
 
 const BaseService = require('./base');
+const fs = require('fs');
+const path = require('path');
 
 class ExampleService extends BaseService {
   async openLocalDir(dir) {
@@ -10,6 +12,80 @@ class ExampleService extends BaseService {
 
     return true;
   }
+
+  async getSMMSToken() {
+    const res = {
+      code: 1000,
+      message: 'unknown error',
+    };
+
+    try {
+      //throw new Error('Sync Error');
+      params = {
+        username: '',
+        password: ''
+      };
+      const url = 'https://sm.ms/api/v2/token';
+      const response = await this.app.curl(url, {
+        method: 'POST',
+        contentType: 'application/json',
+        data: params,
+        dataType: 'json',
+        timeout: 15000,
+      });
+      const result = response.data;
+      if (this.app.config.env === 'local') {
+        this.app.logger.info('[ExampleService] [getSMMSToken]: info result:%j', result);
+      }
+      // this.app.logger.info('[OutapiService] [api]: result:%j', result);
+      if (result.code !== 'success') {
+        this.app.logger.error('[ExampleService] [getSMMSToken]: res error result:%j', result);
+      }
+      return result;
+    } catch (e) {
+      this.app.logger.error('[ExampleService] [getSMMSToken]:  ERROR ', e);
+    }
+
+    return res;
+  }
+  async uploadFileToSMMS(tmpFile) {
+    const res = {
+      code: 1000,
+      message: 'unknown error',
+    };
+
+    try {
+      //throw new Error('Sync Error');
+      const headersObj = {
+        'Content-Type': 'multipart/form-data',
+        'Authorization': 'pHVaIfVX8kgxsEL2THTYMVzJDYY3MMZU'
+      };
+      const url = 'https://sm.ms/api/v2/upload';
+      const response = await this.app.curl(url, {
+        method: 'POST',
+        headers: headersObj,
+        files: {
+          smfile: tmpFile,
+        },
+        //contentType: 'application/json',
+        //data: params,
+        dataType: 'json',
+        timeout: 15000,
+      });
+      const result = response.data;
+      if (this.app.config.env === 'local') {
+        this.app.logger.info('[ExampleService] [uploadFileToSMMS]: info result:%j', result);
+      }
+      if (result.code !== 'success') {
+        this.app.logger.error('[ExampleService] [uploadFileToSMMS]: res error result:%j', result);
+      }
+      return result;
+    } catch (e) {
+      this.app.logger.error('[ExampleService] [uploadFileToSMMS]:  ERROR ', e);
+    }
+
+    return res;
+  }
 }
 
 module.exports = ExampleService;

frontend/src/api/main.js

@@ -3,7 +3,8 @@ import request from '@/utils/request'
 
 const mainApi = {
   outApi: '/v1/outApi',
-  openDir: '/v1/example/openLocalDir'
+  openDir: '/v1/example/openLocalDir',
+  uploadFile: '/v1/example/uploadFile',
 }
 
 /**
@@ -28,4 +29,15 @@ export function openDir (parameter) {
     method: 'post',
     data: parameter
   })
+}
+
+/**
+ * uploadFile
+ */
+export function uploadFile (parameter) {
+  return request({
+    url: mainApi.uploadFile,
+    method: 'post',
+    data: parameter
+  })
 }

frontend/src/config/router.config.js

@@ -13,6 +13,11 @@ export const constantRouterMap = [
         component: () => import('@/views/file/OpenDir')
       },
       {
+        path: 'uploadFile',
+        name: 'UploadFile',
+        component: () => import('@/views/file/UploadFile')
+      },
+      {
         path: 'setting1',
         name: 'setting1',
         component: { template: '<div><h1>这是设置内一</h1></div>' }

frontend/src/views/Layout.vue

@@ -57,7 +57,11 @@ export default {
           'subMenu_1' : {
             title: '打开文件夹',
             page: 'fileOpenDir'
-          }
+          },
+          'subMenu_2' : {
+            title: '上传文件到sm图床',
+            page: 'uploadFile'
+          },
         },
         'menu_2' : {
           'subMenu_1' : {

frontend/src/views/file/OpenDir.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <h3 :style="{ marginBottom: '16px' }">
-      demo 打开文件夹实现
+      demo1 打开文件夹实现
     </h3>
     <a-list bordered :data-source="data">
       <a-list-item @click="openDirectry(item.id)" slot="renderItem" slot-scope="item">

frontend/src/views/file/UploadFile.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <h3 :style="{ marginBottom: '16px' }">
+      demo2 上传文件到sm图床实现
+    </h3>
+    <!-- dev调试时，action参数：请填写你本地完整的api地址，如：http://localhost:7068/api/v1/example/uploadFile -->
+    <a-upload-dragger
+        name="file"
+        :multiple="true"
+        action="http://localhost:7068/api/v1/example/uploadFile"
+        @change="handleChange"
+    >
+        <p class="ant-upload-drag-icon">
+        <a-icon type="inbox" />
+        </p>
+        <p class="ant-upload-text">
+        Click or drag file to this area to upload
+        </p>
+        <p class="ant-upload-hint">
+        Support for a single or bulk upload. Strictly prohibit from uploading company data or other
+        band files
+        </p>
+    </a-upload-dragger>
+    <!-- <a-card hoverable style="width: 240px">
+      <img
+        slot="cover"
+        alt="example"
+        src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
+      />
+
+    </a-card> -->
+    <p/>
+    <a-list v-if="image_info.length !== 0" size="small" bordered :data-source="image_info">
+      <a-list-item style="text-align:left;" slot="renderItem" slot-scope="item">
+        {{ item.id }}.&nbsp;{{ item.imageUrlText }}:&nbsp;
+        <a :href="item.url" target="_blank">{{ item.url }}</a>
+      </a-list-item>
+    </a-list>
+  </div>
+</template>
+<script>
+//import { uploadFile } from '@/api/main'
+
+export default {
+  data() {
+    return {
+      image_info: [],
+      num: 0
+    };
+  },
+  methods: {
+    handleChange(info) {
+      const status = info.file.status;
+      if (status !== 'uploading') {
+        console.log(info.file);
+      }
+      if (status === 'done') {
+        // 去除list列表
+        //info.fileList = [];
+        const uploadRes = info.file.response;
+        console.log('uploadRes:', uploadRes)
+        if (uploadRes.code !== 'success') {
+          this.$message.error(`file upload failed ${uploadRes.code} .`);
+          return false;
+        }
+        this.num++;
+        const picInfo = uploadRes.data;
+        picInfo.id = this.num;
+        picInfo.imageUrlText = 'image url';
+        this.image_info.push(picInfo);
+        this.$message.success(`${info.file.name} file uploaded successfully.`);
+      } else if (status === 'error') {
+        this.$message.error(`${info.file.name} file upload failed.`);
+      }
+    }
+  }
+};
+</script>
+<style></style>