封装组件

image.png

单文件上传组件-singleUpload.vue

  1. <template>
  2.   <div>
  3.     <el-upload
  4.       action="http://gulimall-hello.oss-cn-beijing.aliyuncs.com"
  5.       :data="dataObj"
  6.       list-type="picture"
  7.       :multiple="false" :show-file-list="showFileList"
  8.       :file-list="fileList"
  9.       :before-upload="beforeUpload"
  10.       :on-remove="handleRemove"
  11.       :on-success="handleUploadSuccess"
  12.       :on-preview="handlePreview">
  13.       <el-button size="small" type="primary">点击上传</el-button>
  14.       <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
  15.     </el-upload>
  16.     <el-dialog :visible.sync="dialogVisible">
  17.       <img width="100%" :src="fileList[0].url" alt="">
  18.     </el-dialog>
  19.   </div>
  20. </template>
  21. <script>
  22.    import {policy} from './policy'
  23.    import { getUUID } from '@/utils'
  25.   export default {
  26.     name: 'singleUpload',
  27.     props: {
  28.       value: String
  29.     },
  30.     computed: {
  31.       imageUrl() {
  32.         return this.value;
  33.       },
  34.       imageName() {
  35.         if (this.value != null && this.value !== '') {
  36.           return this.value.substr(this.value.lastIndexOf("/") + 1);
  37.         } else {
  38.           return null;
  39.         }
  40.       },
  41.       fileList() {
  42.         return [{
  43.           name: this.imageName,
  44.           url: this.imageUrl
  45.         }]
  46.       },
  47.       showFileList: {
  48.         get: function () {
  49.           return this.value !== null && this.value !== ''&& this.value!==undefined;
  50.         },
  51.         set: function (newValue) {
  52.         }
  53.       }
  54.     },
  55.     data() {
  56.       return {
  57.         dataObj: {
  58.           policy: '',
  59.           signature: '',
  60.           key: '',
  61.           ossaccessKeyId: '',
  62.           dir: '',
  63.           host: '',
  64.           // callback:'',
  65.         },
  66.         dialogVisible: false
  67.       };
  68.     },
  69.     methods: {
  70.       emitInput(val) {
  71.         this.$emit('input', val)
  72.       },
  73.       handleRemove(file, fileList) {
  74.         this.emitInput('');
  75.       },
  76.       handlePreview(file) {
  77.         this.dialogVisible = true;
  78.       },
  79.       beforeUpload(file) {
  80.         let _self = this;
  81.         return new Promise((resolve, reject) => {
  82.           policy().then(response => {
  83.             console.log("响应的数据",response);
  84.             _self.dataObj.policy = response.data.policy;
  85.             _self.dataObj.signature = response.data.signature;
  86.             _self.dataObj.ossaccessKeyId = response.data.accessid;
  87.             _self.dataObj.key = response.data.dir +getUUID()+'_${filename}';
  88.             _self.dataObj.dir = response.data.dir;
  89.             _self.dataObj.host = response.data.host;
  90.             console.log("响应的数据222。。。",_self.dataObj);
  91.             resolve(true)
  92.           }).catch(err => {
  93.             reject(false)
  94.           })
  95.         })
  96.       },
  97.       handleUploadSuccess(res, file) {
  98.         console.log("上传成功...")
  99.         this.showFileList = true;
  100.         this.fileList.pop();
  101.         this.fileList.push({name: file.name, url: this.dataObj.host + '/' + this.dataObj.key.replace("${filename}",file.name) });
  102.         this.emitInput(this.fileList[0].url);
  103.       }
  104.     }
  105.   }
  106. </script>
  107. <style>
  108. </style>

多文件上传组件-multiUpload.vue

<template>
  <div>
    <el-upload
      action="http://gulimall-hello.oss-cn-beijing.aliyuncs.com"
      :data="dataObj"
      :list-type="listType"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
      :on-preview="handlePreview"
      :limit="maxCount"
      :on-exceed="handleExceed"
      :show-file-list="showFile"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>
<script>
import { policy } from "./policy";
import { getUUID } from '@/utils'
export default {
  name: "multiUpload",
  props: {
    //图片属性数组
    value: Array,
    //最大上传图片数量
    maxCount: {
      type: Number,
      default: 30
    },
    listType:{
      type: String,
      default: "picture-card"
    },
    showFile:{
      type: Boolean,
      default: true
    }

  },
  data() {
    return {
      dataObj: {
        policy: "",
        signature: "",
        key: "",
        ossaccessKeyId: "",
        dir: "",
        host: "",
        uuid: ""
      },
      dialogVisible: false,
      dialogImageUrl: null
    };
  },
  computed: {
    fileList() {
      let fileList = [];
      for (let i = 0; i < this.value.length; i++) {
        fileList.push({ url: this.value[i] });
      }

      return fileList;
    }
  },
  mounted() {},
  methods: {
    emitInput(fileList) {
      let value = [];
      for (let i = 0; i < fileList.length; i++) {
        value.push(fileList[i].url);
      }
      this.$emit("input", value);
    },
    handleRemove(file, fileList) {
      this.emitInput(fileList);
    },
    handlePreview(file) {
      this.dialogVisible = true;
      this.dialogImageUrl = file.url;
    },
    beforeUpload(file) {
      let _self = this;
      return new Promise((resolve, reject) => {
        policy()
          .then(response => {
            console.log("这是什么${filename}");
            _self.dataObj.policy = response.data.policy;
            _self.dataObj.signature = response.data.signature;
            _self.dataObj.ossaccessKeyId = response.data.accessid;
            _self.dataObj.key = response.data.dir +getUUID()+"_${filename}";
            _self.dataObj.dir = response.data.dir;
            _self.dataObj.host = response.data.host;
            resolve(true);
          })
          .catch(err => {
            console.log("出错了...",err)
            reject(false);
          });
      });
    },
    handleUploadSuccess(res, file) {
      this.fileList.push({
        name: file.name,
        // url: this.dataObj.host + "/" + this.dataObj.dir + "/" + file.name； 替换${filename}为真正的文件名
        url: this.dataObj.host + "/" + this.dataObj.key.replace("${filename}",file.name)
      });
      this.emitInput(this.fileList);
    },
    handleExceed(files, fileList) {
      this.$message({
        message: "最多只能上传" + this.maxCount + "张图片",
        type: "warning",
        duration: 1000
      });
    }
  }
};
</script>
<style>
</style>

获取服务端签名-policy.js

import http from '@/utils/httpRequest.js'
export function policy() {
   return  new Promise((resolve,reject)=>{
        http({
            url: http.adornUrl("/third-party/oss/policy"),
            method: "get",
            params: http.adornParams({})
        }).then(({ data }) => {
            resolve(data);
        })
    });
}

品牌管理页面

品牌管理完整页面参考：品牌管理-前端路由及逆向生成代码