springboot整合"又拍云"第三方存储并且使用element-ui上传图片并回显

博主：本当迷
发布时间：2022 年 11 月 02 日
1278 次浏览
1 条评论
2907字数
分类： springboot 教程分享

## 又拍云：

> **又拍云存储免费额度是每月10GB，CDN免费额度是15GB。**具有免费资源存储额度，这样我们就不用把资源存储到自己的服务器上了，大大降低了服务器的压力，提高了应用的可移植性。

### 准备：

1.官网：[https://www.upyun.com/](https://www.upyun.com/)

2.首先我们去又拍云注册一个账号

3.进入云存储

4.创建服务，按照要求填写即可

5.到账号管理新建操作员，把账号和密钥保存下来，后面会用

6.进入刚才我们创建成功的服务，划到存储管理最下面，授权刚才我们新建的操作员

## 整合：

### 导入依赖：

```java

        <dependency>
            <groupId>com.upyun</groupId>
            <artifactId>java-sdk</artifactId>
            <version>4.1.3</version>
        </dependency>
```

### controller接口

```java
@RequestMapping("file")
@RestController
public class FileController {

@PostMapping("getPicUrl")
    public Result<Object> uploadIcon(MultipartFile file) throws IOException, UpException {
        UpYun upYun = new UpYun("创建的服务名称", "操作员账号", "操作员密钥");
        String fileName = file.getOriginalFilename()+ UUID.randomUUID() +".jpg";
        System.out.println("图片名称："+fileName);
        final boolean flag = upYun.writeFile("/blog/userIcon/" + fileName, file.getBytes(), false);
        System.out.println(flag);
        if(flag){
            String picUrl = "创建服务中的域名" + fileName;
            final HashMap<String, Object> map = new HashMap<>();
            map.put("picUrl", picUrl);
            return Result.success(map);
        }

return Result.error("上传失败，请重试");
    }
}
```

### 效果图：

![image.png](https://www.bdmcom.cn/usr/uploads/2022/11/3228066592.png)

## element-ui

### 实现代码：

```javascript

<template>
  <div class="">
    <el-upload
        class="avatar-uploader"
        action="http://localhost:9090/api/file/getPicUrl/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="" style="">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'About',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      imageUrl: ''
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 方法集合
  methods: {
    // 文件上传成功时的钩子
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

},
}
</script>

### 效果图：

![image.png](https://www.bdmcom.cn/usr/uploads/2022/11/3761856914.png)

最后修改：2022 年 11 月 02 日

如果文章有用，请随意打赏。

1 条评论

梦一帆
November 3rd, 2022 at 11:36 am

认真看了下感觉不错，探花里面还有一个阿里云oss上传案例，识别人脸，也是调用。

回复

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

springboot整合"又拍云"第三方存储并且使用element-ui上传图片并回显

本当迷 • 2022 年 11 月 02 日

## 又拍云：

### 准备：

1.官网：[https://www.upyun.com/](https://www.upyun.com/)

2.首先我们去又拍云注册一个账号

3.进入云存储

4.创建服务，按照要求填写即可

5.到账号管理新建操作员，把账号和密钥保存下来，后面会用

6.进入刚才我们创建成功的服务，划到存储管理最下面，授权刚才我们新建的操作员

## 整合：

### 导入依赖：

```java

        <dependency>
            <groupId>com.upyun</groupId>
            <artifactId>java-sdk</artifactId>
            <version>4.1.3</version>
        </dependency>
```

### controller接口

```java
@RequestMapping("file")
@RestController
public class FileController {

return Result.error("上传失败，请重试");
    }
}
```

### 效果图：

![image.png](https://www.bdmcom.cn/usr/uploads/2022/11/3228066592.png)

## element-ui

### 实现代码：

},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

},
}
</script>

### 效果图：

![image.png](https://www.bdmcom.cn/usr/uploads/2022/11/3761856914.png)

springboot整合"又拍云"第三方存储并且使用element-ui上传图片并回显

1 条评论

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

【修仙之路】JAVA学习路线

对于异或运算的初步认识与auto用法

【JAVA经典例题】生产者/消费者问题

最近某音挺火的代码实现爱心形状

再见Swagger！拥抱smart-doc无侵入生成接口文档

Eureka注册中心之搭建eureka-server和eureka-client

ps-图层样式

【英语学习】每日10词

C++语言-const修饰指针

MapStruct属性拷贝工具

springboot整合"又拍云"第三方存储并且使用element-ui上传图片并回显

1 条评论

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

springboot整合"又拍云"第三方存储并且使用element-ui上传图片并回显

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款