封装组件

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

  1. <template>
  2.   <div>
  3.     <el-upload
  4.       action="http://gulimall-hello.oss-cn-beijing.aliyuncs.com"
  5.       :data="dataObj"
  6.       :list-type="listType"
  7.       :file-list="fileList"
  8.       :before-upload="beforeUpload"
  9.       :on-remove="handleRemove"
  10.       :on-success="handleUploadSuccess"
  11.       :on-preview="handlePreview"
  12.       :limit="maxCount"
  13.       :on-exceed="handleExceed"
  14.       :show-file-list="showFile"
  15.     >
  16.       <i class="el-icon-plus"></i>
  17.     </el-upload>
  18.     <el-dialog :visible.sync="dialogVisible">
  19.       <img width="100%" :src="dialogImageUrl" alt />
  20.     </el-dialog>
  21.   </div>
  22. </template>
  23. <script>
  24. import { policy } from "./policy";
  25. import { getUUID } from '@/utils'
  26. export default {
  27.   name: "multiUpload",
  28.   props: {
  29.     //图片属性数组
  30.     value: Array,
  31.     //最大上传图片数量
  32.     maxCount: {
  33.       type: Number,
  34.       default: 30
  35.     },
  36.     listType:{
  37.       type: String,
  38.       default: "picture-card"
  39.     },
  40.     showFile:{
  41.       type: Boolean,
  42.       default: true
  43.     }
  45.   },
  46.   data() {
  47.     return {
  48.       dataObj: {
  49.         policy: "",
  50.         signature: "",
  51.         key: "",
  52.         ossaccessKeyId: "",
  53.         dir: "",
  54.         host: "",
  55.         uuid: ""
  56.       },
  57.       dialogVisible: false,
  58.       dialogImageUrl: null
  59.     };
  60.   },
  61.   computed: {
  62.     fileList() {
  63.       let fileList = [];
  64.       for (let i = 0; i < this.value.length; i++) {
  65.         fileList.push({ url: this.value[i] });
  66.       }
  68.       return fileList;
  69.     }
  70.   },
  71.   mounted() {},
  72.   methods: {
  73.     emitInput(fileList) {
  74.       let value = [];
  75.       for (let i = 0; i < fileList.length; i++) {
  76.         value.push(fileList[i].url);
  77.       }
  78.       this.$emit("input", value);
  79.     },
  80.     handleRemove(file, fileList) {
  81.       this.emitInput(fileList);
  82.     },
  83.     handlePreview(file) {
  84.       this.dialogVisible = true;
  85.       this.dialogImageUrl = file.url;
  86.     },
  87.     beforeUpload(file) {
  88.       let _self = this;
  89.       return new Promise((resolve, reject) => {
  90.         policy()
  91.           .then(response => {
  92.             console.log("这是什么${filename}");
  93.             _self.dataObj.policy = response.data.policy;
  94.             _self.dataObj.signature = response.data.signature;
  95.             _self.dataObj.ossaccessKeyId = response.data.accessid;
  96.             _self.dataObj.key = response.data.dir +getUUID()+"_${filename}";
  97.             _self.dataObj.dir = response.data.dir;
  98.             _self.dataObj.host = response.data.host;
  99.             resolve(true);
  100.           })
  101.           .catch(err => {
  102.             console.log("出错了...",err)
  103.             reject(false);
  104.           });
  105.       });
  106.     },
  107.     handleUploadSuccess(res, file) {
  108.       this.fileList.push({
  109.         name: file.name,
  110.         // url: this.dataObj.host + "/" + this.dataObj.dir + "/" + file.name； 替换${filename}为真正的文件名
  111.         url: this.dataObj.host + "/" + this.dataObj.key.replace("${filename}",file.name)
  112.       });
  113.       this.emitInput(this.fileList);
  114.     },
  115.     handleExceed(files, fileList) {
  116.       this.$message({
  117.         message: "最多只能上传" + this.maxCount + "张图片",
  118.         type: "warning",
  119.         duration: 1000
  120.       });
  121.     }
  122.   }
  123. };
  124. </script>
  125. <style>
  126. </style>

获取服务端签名-policy.js

  1. import http from '@/utils/httpRequest.js'
  2. export function policy() {
  3.    return  new Promise((resolve,reject)=>{
  4.         http({
  5.             url: http.adornUrl("/third-party/oss/policy"),
  6.             method: "get",
  7.             params: http.adornParams({})
  8.         }).then(({ data }) => {
  9.             resolve(data);
  10.         })
  11.     });
  12. }

品牌管理页面

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