vue中上传图片至阿里云oss

1.开通阿里云的oss服务这些这里就不多做介绍了

2.登入阿里云的后台管理系统创建一个Bucket

3.在后台管理系统中进入访问控制

4.点击用户管理->新建用户->填写相关信息,就生成了下图3

5.点击生成用户右侧的授权,添加如图的授权策略

6.点击角色管理->新建角色,然后创建了一个如下图的H5ROULE角色

7.点击右侧授权,并选择如下图的授权策略

8.在vue组件中使用

<template>
  <div class="upload">
    <div class="oss_file">
      <input type="file" :id="id" @change="doUpload"/>
      <img :src="url" alt="">
    </div>
  </div>
</template>

<script>
  export default {
    name: ‘upload‘,
    data () {
      return {
        region: ‘oss-cn-hangzhou‘,根据你买的那个区的做相应的更改
        bucket: ‘buket名称‘,
        id: ‘upload‘,
        percentage: 0,
        url:‘‘,
        urls:[],
        getToken:{
           sign:‘‘,
        }
      }
    },
    methods:{
      doUpload () {
        const _this = this;
        const urls = [];
        _this.$post(‘请求后台接口获取accessKeyId,accessKeySecret和临时验签SecurityToken‘,_this.getToken).then((result) => {
          console.log(result);
          const client = new OSS.Wrapper({
            region: _this.region,
            accessKeyId: result.accessKeyId,
            accessKeySecret:result.accessKeySecret,
            stsToken: result.SecurityToken,
            bucket: _this.bucket
          })
         _this.percentage = 0;
          const files = document.getElementById(_this.id)
          if (files.files) {
            const fileLen = document.getElementById(_this.id).files
            let resultUpload = ‘‘
            for (let i = 0; i < fileLen.length; i++) {
              const file = fileLen[i]
              // 随机命名
              let random_name = this.random_string(6) + ‘_‘ + new Date().getTime() + ‘.‘ + file.name.split(‘.‘).pop()
              // 上传
              client.multipartUpload(random_name, file, {
                progress: function* (percentage, cpt) {
                  // 上传进度
                  _this.percentage = percentage
                }
              }).then((results) => {
                // 上传完成
                const url = ‘http://buket名称.oss-cn-hangzhou.aliyuncs.com/‘+ results.name; _this.$store.dispatch("changeUrl", _this.url); _this.url = url; console.log(url); }).catch((err) => { console.log(err) }) } } }) }, 

// 随机生成文件名  random_string(len) {   len = len || 32;   var chars = ‘ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678‘;   var maxPos = chars.length;   var pwd = ‘‘;   for (let i = 0; i < len; i++) {   pwd += chars.charAt(Math.floor(Math.random() * maxPos)); } return pwd; } }, watch:{ url(val){ if(val){ this.urls.push(val); } } } } 

</script> 

<style lang="less"> .oss_file { height: 150px; width: 150px; border-radius: 50%; // background: red; img{ width:100%; display: inline-block; float: right; } } .oss_file input { right: 0; top: 0; opacity: 0; filter: alpha(opacity=0); cursor: pointer; width: 100%; height: 100%; } </style>

9.后台操作如下以java为例

时间: 2024-10-07 07:48:25

vue中上传图片至阿里云oss的相关文章

Java中使用RestFul接口上传图片到阿里云OSS服务器

1.接口方法 import java.io.IOException; import javax.servlet.http.HttpServletRequest; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation

简单上传图片到阿里云OSS

OSS主要为用户提供数据存储服务,用户可以通过以下操作来处理OSS上的数据: 1.创建.查看.罗列.删除 Bucket: 2.修改.获取Bucket的访问权限: 3.上传.查看.罗列.删除Object/Object Group: 4.访问时支持If-Modified-Since和If-Match等HTTP参数.特点具体如下: 1.易用性:简单易用,便于管理,深度集成数据处理服务: 2.高可靠:多重冗余备份,服务设计可用性不低于99.99%: 3.强安全:多层次安全防护,支持跨区域复制.异地容灾机

上传图片到阿里云OSS和获取上传图片的外网url的步骤

<form action="/bcis/api/headImgUpload.json" method="post" enctype="multipart/form-data">     <input type="file" name="file">     <input type="submit" value="提交"> </

上传图片到阿里云OSS的步骤

啥都不说  直接上代码 1.html: <form action="/bcis/api/headImgUpload.json" method="post" enctype="multipart/form-data"> <input type="file" name="file"> <input type="submit" value="提交&quo

上传图片到阿里云oss

阿里云地址 登录阿里云管理控制台,创建对象存储oss private static final String endpoint = "http://oss-cn-shanghai.aliyuncs.com"; private static final String accessKeyId = PropKit.get("accessKeyId"); private static final String accessKeySecret = PropKit.get(&q

PHP上传文件到阿里云OSS,nginx代理访问

1. 阿里云OSS创建存储空间Bucket(读写权限为:公共读) 2. 拿到相关配置 accessKeyId:********* accessKeySecret:********* endpoint:******** bucket:******** 3.创建 oss.php 上传类 (基于thinkPHP5) <?php namespace app\controller; use OSS\OssClient; class Oss { private static $_instance; priv

项目总结56:阿里云OSS上传的图片被自动旋转问题解决

问题:上传图片到阿里云OSS,再再HTML标签使用OSS图片路径,展示的图片被自动旋转了:但是将图片图片路径直接浏览器打开,是原始没有旋转过的: 解决方案: 阿里云文档已经说明了解决方案,链接:https://help.aliyun.com/document_detail/44691.html?spm=a2c4g.11186623.6.1160.1c5d149dByJ2yu 原因是某些手机拍摄出来的照片可能带有旋转参数(存放在照片exif信息里面),img处理图片是会识别这个旋转参数 即在URL

angulaijs中的ng-upload-file与阿里云oss服务的结合,实现在浏览器端上传文件到阿里云(速度可以达到1.5M)

angularjs结合aliyun浏览器端oos文件上传加临时身份验证例子 在服务端获取sts 源码: public class StsServiceSample { // 目前只有"cn-hangzhou"这个region可用, 不要使用填写其他region的值 //<setting name="accessKeyId" value="H6JSh0Y****z2cGa" /> //<setting name="ecr

在OneThink(ThinkPHP3.2.3)中整合阿里云OSS的PHP-SDK2.0.4,实现Web端直传,服务端签名直传并设置上传回调的实现流程

在OneThink(ThinkPHP3.2.3)中整合阿里云OSS的PHP-SDK2.0.4,实现本地文件上传流程 by shuijingwan · 2016/01/13 1.SDK安装 github地址:https://github.com/aliyun/aliyun-oss-php-sdk 2.复制aliyun-oss-php-sdk-master\src\OSS至passport.hmwis.com\ThinkPHP\Library\Vendor\OSS,如图1.2 复制aliyun-os