v1.3 版本发布,代码同步后端v1.3版本

src/views/tools/qiniu/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-tabs v-model="activeName" style="padding-left: 5px;">
+    <el-tab-pane label="存储配置" name="first">
+      <Config/>
+    </el-tab-pane>
+    <el-tab-pane label="文件列表" name="second">
+      <List/>
+    </el-tab-pane>
+    <el-tab-pane label="使用说明" name="third">
+      <Description/>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import Config from './module/config'
+import List from './module/list'
+import Description from './module/description'
+export default {
+  components: { Config, List, Description },
+  data() {
+    return {
+      activeName: 'second'
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/tools/qiniu/module/config.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="130px">
+    <el-form-item label="Access Key" prop="accessKey">
+      <el-input v-model="form.accessKey" style="width: 35%"/>
+      <span style="color: #C0C0C0;margin-left: 10px;">accessKey，在安全中心，秘钥管理中查看</span>
+    </el-form-item>
+    <el-form-item label="Secret Key" prop="secretKey">
+      <el-input v-model="form.secretKey" type="password" style="width: 35%;"/>
+      <span style="color: #C0C0C0;margin-left: 10px;">secretKey，在安全中心，秘钥管理中查看</span>
+    </el-form-item>
+    <el-form-item label="空间名称" prop="bucket">
+      <el-input v-model="form.bucket" style="width: 35%;"/>
+      <span style="color: #C0C0C0;margin-left: 10px;">存储空间名称作为唯一的 Bucket 识别符</span>
+    </el-form-item>
+    <el-form-item label="外链域名" prop="host">
+      <el-input v-model="form.host" style="width: 35%;"/>
+      <span style="color: #C0C0C0;margin-left: 10px;">外链域名，可自定义，需在七牛云绑定</span>
+    </el-form-item>
+    <el-form-item label="存储区域" prop="port">
+      <el-select v-model="form.zone" placeholder="请选择存储区域">
+        <el-option
+          v-for="item in zones"
+          :key="item"
+          :label="item"
+          :value="item"/>
+      </el-select>
+      <span style="color: #C0C0C0;margin-left: 10px;">北美区域尚未支持自定义数据处理服务，一旦创建区域无法修改，请谨慎选择</span>
+    </el-form-item>
+    <el-form-item label="空间类型" prop="host">
+      <el-radio v-model="form.type" label="公开">公开</el-radio>
+      <el-radio v-model="form.type" label="私有" >私有</el-radio>
+      <span style="color: #C0C0C0;margin-left: 10px;">公开和私有仅对 Bucket 的读文件生效，修改、删除、写入等对 Bucket 的操作均需要拥有者的授权才能进行操作</span>
+    </el-form-item>
+    <el-button :loading="loading" style="margin-left:5%;" size="medium" type="success" @click="doSubmit">保存配置</el-button>
+  </el-form>
+</template>
+
+<script>
+import { get, update } from '@/api/qiniu'
+export default {
+  name: 'Config',
+  data() {
+    return {
+      zones: ['华东', '华北', '华南', '北美', '东南亚'],
+      loading: false, form: { accessKey: '', secretKey: '', bucket: '', host: '', zone: '', type: '' },
+      rules: {
+        accessKey: [
+          { required: true, message: '请输入accessKey', trigger: 'blur' }
+        ],
+        secretKey: [
+          { required: true, message: '请输入secretKey', trigger: 'blur' }
+        ],
+        bucket: [
+          { required: true, message: '请输入空间名称', trigger: 'blur' }
+        ],
+        host: [
+          { required: true, message: '请输入外链域名', trigger: 'blur' }
+        ],
+        type: [
+          { required: true, message: '空间类型不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      get().then(res => {
+        this.form = res
+      })
+    },
+    doSubmit() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          update(this.form).then(res => {
+            this.$notify({
+              title: '修改成功',
+              type: 'success',
+              duration: 2500
+            })
+            this.loading = false
+          }).catch(err => {
+            this.loading = false
+            console.log(err.response.data.message)
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/tools/qiniu/module/description.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <blockquote class="my-blockquote">注意</blockquote>
+    <pre class="my-code">
+1、尽量使用英文文件名进行上传，中文文件名在私有空间下下载会出现问题
+2、配置时外链域名需带上协议，也就是必须http/https开头
+3、如果七牛云中存在数据，使用同步按钮即可将数据同步到数据库
+4、本次集成了七牛云的常用操作，如：上传，下载，删除，同步，支持私有空间上传下载
+5、项目中配置存入数据库，如需测试，请使用临时空间进行测试，测试完成及时修改配置，反正数据泄露</pre>
+    <blockquote class="my-blockquote"> 开始使用</blockquote>
+    <pre class="my-code">
+#引入依赖
+&lt;dependency&gt;
+  &lt;groupId&gt;com.qiniu&lt;/groupId&gt;
+  &lt;artifactId&gt;qiniu-java-sdk&lt;/artifactId&gt;
+  &lt;version&gt;[7.2.0, 7.2.99]&lt;/version&gt;
+&lt;dependency&gt;
+#简单的上传文件
+//构造一个带指定Zone对象的配置类
+Configuration cfg = new Configuration(Zone.zone0());
+//...其他参数参考类注释
+UploadManager uploadManager = new UploadManager(cfg);
+//...生成上传凭证，然后准备上传
+String accessKey = "your access key";
+String secretKey = "your secret key";
+String bucket = "your bucket name";
+//默认不指定key的情况下，以文件内容的hash值作为文件名
+String key = null;
+try {
+    byte[] uploadBytes = "hello qiniu cloud".getBytes("utf-8");
+    Auth auth = Auth.create(accessKey, secretKey);
+    String upToken = auth.uploadToken(bucket);
+    try {
+        Response response = uploadManager.put(uploadBytes, key, upToken);
+        //解析上传成功的结果
+        DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
+        System.out.println(putRet.key);
+        System.out.println(putRet.hash);
+    } catch (QiniuException ex) {
+        Response r = ex.response;
+        System.err.println(r.toString());
+        try {
+            System.err.println(r.bodyString());
+        } catch (QiniuException ex2) {
+            //ignore
+        }
+    }
+} catch (UnsupportedEncodingException ex) {
+    //ignore
+}</pre>
+    <blockquote class="my-blockquote">更多帮助</blockquote>
+    <pre class="my-code">更多帮助请查看系统源码，或者七牛云java开发文档
+七牛云官网：<a style="color: #00a2d4" href="https://sso.qiniu.com/" target="_blank">https://sso.qiniu.com/</a>
+七牛云java开发文档：<a style="color: #00a2d4" href="https://developer.qiniu.com/kodo/sdk/1239/java#3" target="_blank">https://developer.qiniu.com/kodo/sdk/1239/java#3</a></pre>
+  </div>
+</template>
+
+<script>
+import '@/styles/description.scss'
+export default {
+  name: 'Description'
+}
+</script>
+
+<style scoped>
+</style>

src/views/tools/qiniu/module/list.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="app-container">
+    <search :query="query"/>
+    <!--表格渲染-->
+    <el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
+      <el-table-column :show-overflow-tooltip="true" prop="key" label="文件名"/>
+      <el-table-column prop="bucket" label="空间名称"/>
+      <el-table-column :show-overflow-tooltip="true" prop="url" label="地址/私有空间需下载访问">
+        <template slot-scope="scope">
+          <a :href="scope.row.url" style="color: #42b983" target="_blank">{{ scope.row.url }}</a>
+        </template>
+      </el-table-column>
+      <el-table-column prop="size" label="文件大小"/>
+      <el-table-column prop="type" label="空间类型"/>
+      <el-table-column width="180px" prop="updateTime" label="更新日期">
+        <template slot-scope="scope">
+          <span>{{ time(scope.row.updateTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="160px" align="center">
+        <template slot-scope="scope">
+          <el-button
+            :loading="downloadLoading"
+            size="mini"
+            @click="download(scope.row.id)">下载</el-button>
+          <el-popover
+            v-if="checkPermission(['ADMIN','PICTURE_ALL','PICTURE_DELETE'])"
+            v-model="scope.row.delPopover"
+            placement="top"
+            width="180">
+            <p>确定删除本条数据吗？</p>
+            <div style="text-align: right; margin: 0">
+              <el-button size="mini" type="text" @click="scope.row.delPopover = false">取消</el-button>
+              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.$index, scope.row)">确定</el-button>
+            </div>
+            <el-button slot="reference" type="danger" size="mini" @click="scope.row.delPopover = true">删除</el-button>
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <el-pagination
+      :total="total"
+      style="margin-top: 8px;"
+      layout="total, prev, pager, next, sizes"
+      @size-change="sizeChange"
+      @current-change="pageChange"/>
+  </div>
+</template>
+
+<script>
+import checkPermission from '@/utils/permission' // 权限判断函数
+import initData from '../../../../mixins/initData'
+import { del, download } from '@/api/qiniu'
+import { parseTime } from '@/utils/index'
+import search from './module/search'
+export default {
+  components: { search },
+  mixins: [initData],
+  data() {
+    return {
+      url: '',
+      // 新窗口的引用
+      newWin: null,
+      downloadLoading: false, delLoading: false, sup_this: this
+    }
+  },
+  watch: {
+    url(newVal, oldVal) {
+      if (newVal && this.newWin) {
+        this.newWin.sessionStorage.clear()
+        this.newWin.location.href = newVal
+        // 重定向后把url和newWin重置
+        this.url = ''
+        this.newWin = null
+      }
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      this.init()
+    })
+  },
+  methods: {
+    checkPermission,
+    beforeInit() {
+      this.url = 'api/qiNiuContent'
+      const sort = 'id,desc'
+      const query = this.query
+      const value = query.value
+      this.params = { page: this.page, size: this.size, sort: sort }
+      if (value) { this.params['key'] = value }
+      return true
+    },
+    subDelete(index, row) {
+      this.delLoading = true
+      del(row.id).then(res => {
+        this.delLoading = false
+        row.delPopover = false
+        this.init()
+        this.$notify({
+          title: '删除成功',
+          type: 'success',
+          duration: 2500
+        })
+      }).catch(err => {
+        this.delLoading = false
+        row.delPopover = false
+        console.log(err.response.data.message)
+      })
+    },
+    download(id) {
+      this.downloadLoading = true
+      // 先打开一个空的新窗口，再请求
+      this.newWin = window.open()
+      download(id).then(res => {
+        this.downloadLoading = false
+        this.url = res
+      }).catch(err => {
+        this.downloadLoading = false
+        console.log(err.response.data.message)
+      })
+    },
+    time(time) {
+      return parseTime(time)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/tools/qiniu/module/module/add.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialog = true">上传文件</el-button>
+    <el-dialog :visible.sync="dialog" width="400px" @close="doSubmit">
+      <el-upload
+        :before-remove="handleBeforeRemove"
+        :on-success="handleSuccess"
+        :on-error="handleError"
+        :file-list="fileList"
+        :headers="headers"
+        :action="qiNiuUploadApi"
+        class="upload-demo"
+        multiple>
+        <el-button size="small" type="primary">点击上传</el-button>
+        <div slot="tip" style="display: block;width: 330px" class="el-upload__tip">请勿上传违法文件，且文件不超过5M</div>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="doSubmit">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { del } from '@/api/qiniu'
+import { getToken } from '@/utils/auth'
+export default {
+  data() {
+    return {
+      headers: {
+        'Authorization': 'Bearer ' + getToken()
+      },
+      dialog: false,
+      dialogImageUrl: '',
+      dialogVisible: false,
+      fileList: [],
+      files: []
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'qiNiuUploadApi'
+    ])
+  },
+  methods: {
+    handleSuccess(response, file, fileList) {
+      const uid = file.uid
+      const id = response.id
+      this.files.push({ uid, id })
+    },
+    handleBeforeRemove(file, fileList) {
+      for (let i = 0; i < this.files.length; i++) {
+        if (this.files[i].uid === file.uid) {
+          del(this.files[i].id).then(res => {})
+          return true
+        }
+      }
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    // 刷新列表数据
+    doSubmit() {
+      this.fileList = []
+      this.dialogVisible = false
+      this.dialogImageUrl = ''
+      this.dialog = false
+      this.$parent.$parent.init()
+    },
+    // 监听上传失败
+    handleError(e, file, fileList) {
+      const msg = JSON.parse(e.message)
+      this.$notify({
+        title: msg.message,
+        type: 'error',
+        duration: 2500
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  div{
+    display: inline-block;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+</style>

src/views/tools/qiniu/module/module/search.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="head-container">
+    <el-input v-model="query.value" clearable placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
+    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
+    <add/>
+    <el-button :icon="icon" class="filter-item" size="mini" type="primary" @click="synchronize">{{ buttonName }}</el-button>
+  </div>
+</template>
+
+<script>
+import add from './add'
+import { sync } from '@/api/qiniu'
+// 查询条件
+export default {
+  components: { add },
+  props: {
+    query: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      icon: 'el-icon-refresh',
+      buttonName: '同步数据'
+    }
+  },
+  methods: {
+    toQuery() {
+      this.$parent.page = 0
+      this.$parent.init()
+    },
+    synchronize() {
+      this.icon = 'el-icon-loading'
+      this.buttonName = '同步中'
+      sync().then(res => {
+        this.icon = 'el-icon-refresh'
+        this.buttonName = '同步数据'
+        this.$message({
+          showClose: true,
+          message: '数据同步成功',
+          type: 'success',
+          duration: 1500
+        })
+        this.toQuery()
+      }).catch(err => {
+        this.icon = 'el-icon-refresh'
+        this.buttonName = '同步数据'
+        console.log(err.response.data.message)
+      })
+    }
+  }
+}
+</script>