谷粒商城-品牌管理-新增修改时logo文件上传

Posted 2023-03-03 最小的帆也能远航

封装组件 

 单文件上传组件-singleUpload.vue

<template>
  <div>
    <el-upload
      action="http://gulimall-hello.oss-cn-beijing.aliyuncs.com"
      :data="dataObj"
      list-type="picture"
      :multiple="false" :show-file-list="showFileList"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
      :on-preview="handlePreview">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="fileList[0].url" alt="">
    </el-dialog>
  </div>
</template>
<script>
   import policy from './policy'
   import  getUUID  from '@/utils'

  export default 
    name: 'singleUpload',
    props: 
      value: String
    ,
    computed: 
      imageUrl() 
        return this.value;
      ,
      imageName() 
        if (this.value != null && this.value !== '') 
          return this.value.substr(this.value.lastIndexOf("/") + 1);
         else 
          return null;
        
      ,
      fileList() 
        return [
          name: this.imageName,
          url: this.imageUrl
        ]
      ,
      showFileList: 
        get: function () 
          return this.value !== null && this.value !== ''&& this.value!==undefined;
        ,
        set: function (newValue) 
        
      
    ,
    data() 
      return 
        dataObj: 
          policy: '',
          signature: '',
          key: '',
          ossaccessKeyId: '',
          dir: '',
          host: '',
          // callback:'',
        ,
        dialogVisible: false
      ;
    ,
    methods: 
      emitInput(val) 
        this.$emit('input', val)
      ,
      handleRemove(file, fileList) 
        this.emitInput('');
      ,
      handlePreview(file) 
        this.dialogVisible = true;
      ,
      beforeUpload(file) 
        let _self = this;
        return new Promise((resolve, reject) => 
          policy().then(response => 
            console.log("响应的数据",response);
            _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;
            console.log("响应的数据222。。。",_self.dataObj);
            resolve(true)
          ).catch(err => 
            reject(false)
          )
        )
      ,
      handleUploadSuccess(res, file) 
        console.log("上传成功...")
        this.showFileList = true;
        this.fileList.pop();
        this.fileList.push(name: file.name, url: this.dataObj.host + '/' + this.dataObj.key.replace("$filename",file.name) );
        this.emitInput(this.fileList[0].url);
      
    
  
</script>
<style>
</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);
        )
    );