商品服务-API-品牌管理-显示开关,阿里oss云存储开通使用

最新推荐文章于 2022-05-13 15:58:03 发布

舞象

最新推荐文章于 2022-05-13 15:58:03 发布

阅读量415

点赞数

分类专栏：微服务 Vue 文章标签： java 阿里云 vue

本文链接：https://blog.csdn.net/weixin_42506047/article/details/108697842

版权

微服务同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

1. 导入逆向工程生成的brand.vue,brand-add-or-update.vue

brand.vue导入brand-add-or-update.vue 的模块,

<!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList">
    </add-or-update>
    
import AddOrUpdate from "./brand-add-or-update";

1.1 brand.vue 插入显示开关的卡槽

<el-table-column prop="showStatus" header-align="center" align="center" label="显示状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.showStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"    //激活开关与数据库中'0' '1'绑定
            :inactive-value="0"
            @change="updateBrandStatus(scope.row)"  //switch开关状态监听方法
          ></el-switch>
        </template>
      </el-table-column>
      
updateBrandStatus(data) {
      console.log("最新信息", data);
      let { brandId, showStatus } = data;
      //发送请求修改状态
      this.$http({
        url: this.$http.adornUrl("/product/brand/update/status"),
        method: "post",
        data: this.$http.adornData({ brandId, showStatus }, false)
      }).then(({ data }) => {
        this.$message({
          type: "success",
          message: "状态更新成功"
        });
      });
    },
    
========brand-add-or-update.vue 模块====
<el-form-item label="显示状态" prop="showStatus">
        <el-switch
          v-model="dataForm.showStatus"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
</el-form-item>

2 开通阿里的oss对象存储

在这里插入图片描述

2.1 直接通过服务去上传

==================测试oss 上传===
  @Test
    public void testUpload() throws FileNotFoundException {
        // Endpoint以杭州为例，其它Region请按实际情况填写。
        String endpoint = "oss-cn-beijing.aliyuncs.com";
// 云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用RAM子账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建。
        String accessKeyId = "LTAI4G8j1rNYAXwpRvT5QxZ8";
        String accessKeySecret = "********";

// 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

// 上传文件流。
        InputStream inputStream = new FileInputStream("D:\\图片\\QQ图片20191224214128.jpg");
        ossClient.putObject("gulimall-wenjian", "wenjian.jpg", inputStream);

// 关闭OSSClient。
        ossClient.shutdown();
        System.out.println("上传完成...");
    }

===========oss 脚手架====
<!--        oss 对象存储-->
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alicloud-oss</artifactId>
            <version>2.2.0.RELEASE</version>
        </dependency>
        
*****xx.yml****
    alicloud:
      access-key: LTAI4G8j1rNYAXwpRvT5QxZ8
      secret-key: *******
      oss:
        endpoint: oss-cn-beijing.aliyuncs.com

*****自动注入 OSSClient****

    @Autowired
    OSSClient ossClient;
    @Test
    public void testUpload() throws FileNotFoundException {
// 上传文件流。
        InputStream inputStream = new FileInputStream("D:\\图片\\QQ图片20191224214128.jpg");
        ossClient.putObject("gulimall-wenjian", "wenjian.jpg", inputStream);

// 关闭OSSClient。
        ossClient.shutdown();
        System.out.println("上传完成...");
    }


spring.application.name=gulimall-third-party
spring.cloud.nacos.config.server-addr=127.0.0.1:8848
spring.cloud.nacos.config.namespace=4

spring.cloud.nacos.config.extension-configs[0].data-id=oss.yml
spring.cloud.nacos.config.extension-configs[0].group=DEFAULT_GROUP
spring.cloud.nacos.config.extension-configs[0].refresh=true

2.2 服务生成签名返回,供前段请求使用

==========后台 Controller 签名直传服务 ,返回oss云存储地址,key等信息 json=====

@RestController
public class OssController {

    @Autowired
    OSS ossClient;

    @Value("${spring.cloud.alicloud.oss.endpoint}")
    private String endpoint;

    @Value("${spring.cloud.alicloud.access-key}")
    private String accessId;

    @RequestMapping("/oss/policy")
    public Map<String, String> policy() {

        String bucket = "gulimall-wenjian"; // 请填写您的 bucketname 。
        String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint
        // callbackUrl为 上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实信息。
//        String callbackUrl = "http://88.88.88.88:8888";
        String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
        String dir = format+"/"; // 用户上传文件时指定的前缀。
        Map<String, String> respMap=null;
        try {
            long expireTime = 30;
            long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);
            // PostObject请求最大可支持的文件大小为5 GB，即CONTENT_LENGTH_RANGE为5*1024*1024*1024。
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);

            String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            String postSignature = ossClient.calculatePostSignature(postPolicy);

            respMap = new LinkedHashMap<String, String>();
            respMap.put("accessid", accessId);
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            respMap.put("dir", dir);
            respMap.put("host", host);
            respMap.put("expire", String.valueOf(expireEndTime / 1000));
            // respMap.put("expire", formatISO8601Date(expiration));

        } catch (Exception e) {
            // Assert.fail(e.getMessage());
            System.out.println(e.getMessage());
        } finally {
            ossClient.shutdown();
        }
        return respMap;
    }
}

======前台, 举个新增例子====
<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>

 <!-- 弹窗引用组件, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

   // 新增 / 修改方法
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
	=====dialog 别引用的弹窗,其中图片上传又引用了组件===
<el-form-item label="品牌logo地址" prop="logo">
      <!-- <el-input v-model="dataForm.logo" placeholder="品牌logo地址"></el-input> -->
        <single-upload v-model="dataForm.logo"></single-upload>
    </el-form-item>

===== 上传组件,到====
 <el-upload
      action="http://gulimall-wenjian.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>


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

在这里插入图片描述

舞象

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
商品服务-API-品牌管理-显示开关,阿里oss云存储开通使用

1. 导入逆向工程生成的brand.vue,brand-add-or-update.vuebrand.vue导入brand-add-or-update.vue 的模块, <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"> </add-or-update> import Add
复制链接

扫一扫