发布到开发环境验证

package.json

@@ -14,6 +14,7 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
+    "ali-oss": "^6.16.0",
     "axios": "0.18.1",
     "core-js": "3.6.5",
     "element-ui": "2.13.2",

src/utils/ali-oss.js

@@ -0,0 +1,27 @@
+// 引入ali-oss
+let OSS = require('ali-oss')
+/**
+ *  [accessKeyId] {String}：通过阿里云控制台创建的AccessKey。
+ *  [accessKeySecret] {String}：通过阿里云控制台创建的AccessSecret。
+ *  [bucket] {String}：通过控制台或PutBucket创建的bucket。
+ *  [region] {String}：bucket所在的区域， 默认oss-cn-hangzhou。
+ */
+export function client(data) { // data后端提供数据
+  return new OSS({
+    region: data.region,
+    accessKeyId: data.accessKeyId,
+    accessKeySecret:  data.accessKeySecret,
+    bucket: data.bucket
+  })
+}
+
+/**
+ * 生成随机文件名称
+ * 规则八位随机字符，加下划线连接时间戳
+ */
+export const getFileNameUUID = () => {
+  function rx() {
+    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+  }
+  return `${+new Date()}_${rx()}${rx()}`
+}

src/views/photographerManagement/photoVerify/index.vue

@@ -13,6 +13,8 @@
         >批量上传照片</el-button
       >
 
+      <ali-oss-multi></ali-oss-multi>
+
       <base-table
         :columns="columns"
         :items="items"
@@ -24,6 +26,7 @@
 </template>
 
 <script>
+import aliOssMulti from './modal/ali-oss-multi';
 import toolbar from './toolbar';
 import mxFilterList from '@/mixins/filterList';
 import { getPage, delItem } from '@/api/photoWarehouse';
@@ -31,7 +34,7 @@ import { getPage, delItem } from '@/api/photoWarehouse';
 export default {
   name: 'PhotoVerify',
 
-  components: { toolbar },
+  components: { toolbar, aliOssMulti },
 
   mixins: [
     mxFilterList({

src/views/photographerManagement/photoVerify/modal/ali-oss-multi.vue

@@ -0,0 +1,133 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="modal"
+    :close-on-click-modal="false"
+    width="960px"
+    @close="
+      res => {
+        $emit('cancel');
+      }
+    "
+  >
+    <el-upload
+      action
+      :http-request="Upload"
+      :before-upload="beforeAvatarUpload"
+      :on-preview="handlePreview"
+      :before-remove="beforeRemove"
+      :on-remove="handleRemove"
+      :on-success="handleSuccess"
+      :on-exceed="handleExceed"
+      drag
+      :limit="limit"
+      :file-list="fileList"
+    >
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">
+        将文件拖到此处，或
+        <em>点击上传</em>
+      </div>
+      <div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div>
+    </el-upload>
+
+    <el-progress v-show="showProgress" :text-inside="true" :stroke-width="15" :percentage="progress"></el-progress>
+  </el-dialog>
+</template>
+
+<script>
+import { client , getFileNameUUID  } from "@/utils/ali-oss"; //前面的ali-js文件内的两个封装函数
+
+export default {
+  name: "Upload",
+  props: {
+    limit: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      title: '阿里云OSS上传',
+      modal: true,
+
+      fileList: [],//文件列
+      showProgress: false,//进度条的显示
+      dataObj: {
+        region: 'oss-cn-guangzhou',
+        accessKeyId: 'LTAI5t8FMLXGzU4pTi9GXWb6',
+        accessKeySecret: 'Hz6WOXIVNfpdMphYtf3laHbVoasGlT',
+        bucket: 'yxl-kindergarten',
+      }, //存签名信息
+      progress: 0 //进度条数据
+    };
+  },
+  methods: {
+    // 文件超出个数限制时的钩子
+    handleExceed(files, fileList) {
+      this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
+    },
+    // 点击文件列表中已上传的文件时的钩子
+    handlePreview(file) {},
+    // 删除文件之前的钩子
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
+    // 文件列表移除文件时的钩子
+    handleRemove(file, fileList) {},
+    // 文件上传成功时的钩子
+    handleSuccess(response, file, fileList) {
+      this.fileList = fileList;
+    },
+    //文件上传前的校验
+    beforeAvatarUpload(file) {
+      // if (["video/mp4"].indexOf(file.type) == -1) {
+      //   this.$message.error("请上传正确的视频格式");
+      //   return false;
+      // }
+      // const isLt100M = file.size / 1024 / 1024 > 10 && file.size / 1024 / 1024 < 1024;
+      // if (!isLt100M) {
+      //   this.$message.error("上传视频大小要在10MB~1GB之间哦!");
+      //   return false;
+      // }
+      const isLt30 = file.name.length < 30;
+      if (!isLt30) {
+        this.$message.error("上传视频文件名称长度必须要小于30个文字哦!");
+        return false;
+      }
+    },
+    // http-request属性来覆盖默认的上传行为（即action="url"），自定义上传的实现
+    Upload(file) {
+      const that = this;
+      async function multipartUpload() {
+        let temporary = file.file.name.lastIndexOf(".");
+        let fileNameLength = file.file.name.length;
+        let fileFormat = file.file.name.substring(
+          temporary + 1,
+          fileNameLength
+        );
+        let fileName = getFileNameUUID() + "." + fileFormat;
+
+        client(that.dataObj).multipartUpload(`tmp/${fileName}`, file.file, {
+          progress: function(p) {
+            //p进度条的值
+            console.log(p);
+            that.showProgress = true;
+            that.progress = Math.floor(p * 100);
+          }
+        })
+        .then(result => {
+          //上传成功返回值，可针对项目需求写其他逻辑
+          console.log(result);
+        })
+        .catch(err => {
+          console.log("err:", err);
+        });
+      }
+      multipartUpload();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>