精华内容
下载资源
问答
  • 前端使用阿里云上传文件(sts授权上传) vue框架 下载阿里云插件 npm install ali-oss --save 获取授权所需的参数 //获取Token async getAliToken() { //获取Token let uploadUrl = "api/v1/funs/getSts"; //...

    前端使用阿里云上传文件(sts授权上传) vue框架


    下载阿里云插件

     npm install ali-oss --save
    

    获取授权所需的参数

     //获取Token
       async getAliToken() {
        //获取Token
        let uploadUrl = "api/v1/funs/getSts"; // 也可以前端写死 需要的参数  ps:我使用的是后端返回的参数
        return new Promise((resolve, reject) => {
          uploadInstance
            .post(uploadUrl)
            .then((res) => {
              if (res.status === 200) {
                const {
                  expiration,
                  AccessKeyId,
                  AccessKeySecret,
                  SecurityToken,
                  bucket,
                  endpoint,
                } = res.data;
                let dataObj = {
                  region: endpoint,
                  bucket,
                  accessKeyId: AccessKeyId,
                  accessKeySecret: AccessKeySecret,
                  stsToken: SecurityToken,
                };
                resolve(dataObj);
              } else {
                reject(false);
              }
            })
            .catch((err) => {
              console.log(err);
              reject(false);
            });
        });
      }
        });
    

    封装一个oss对象接受获取到的参数

     Client = (data) => {
        //后端提供数据
        return new OSS({
          region: data.region, //oss-cn-beijing-internal.aliyuncs.com
          accessKeyId: data.accessKeyId,
          secure: true,
          accessKeySecret: data.accessKeySecret,
          stsToken: data.stsToken,
          bucket: data.bucket,
        });
      };
    

    上传文件到阿里云

    // 阿里云上传
      async updateAliOSS(filename, file) {
        let params = {};
        await this.getAliToken() // 获取oss对象所需参数赋值params
          .then((response) => {
            params = response;
          })
          .catch((err) => {
            console.log(err);
          });
    
        return new Promise((resolve, reject) => {
          let client = this.Client(params); //生成一个oss对象并将参数带入
          client.multipartUpload(filename, file, { // 分片上传 
              progress: function(p, checkpoint) {
                option.onProgress({ percent: Math.floor(p * 100) }); // 触发el-upload组件的onProgress方法
              },
            })
            .then(({ res }) => {
              if (res.statusCode === 200) { //判断上传是否成功
                resolve(res.requestUrls);
              } else {
                option.onError("上传失败");
              }
            })
            .catch((error) => { 
              client.put(filename, file, { // 如果分片上传失败 使用put上传
                  progress: function(p, checkpoint) {
                    option.onProgress({ percent: Math.floor(p * 100) }); // 触发el-upload组件的onProgress方法
                  },
                })
                .then(({ res }) => {
                  if (res.statusCode == 200) {
                    resolve(res.requestUrls);
                  } else {
                    option.onError("上传失败");
                  }
                });
            });
        });
      }
    
    展开全文
  • antd-vue upload组件使用ali-oss sts上传图片引入js组件 部分代码结束 引入 npm install ali-oss js 出现异常时,重新获取一下sts的token import OSS from 'ali-oss' import { csyApi } from '../api/csy' let ...

    antd-vue upload组件使用ali-oss sts上传图片

    引入

    npm install ali-oss

    js

    出现异常时,重新获取一下sts的token

    import OSS from 'ali-oss'
    import { csyApi } from '../api/csy'
    let stsInfo = {
      accessKeyId: null,
      accessKeySecret: null,
      securityToken: null,
      bucketName: null,
      dir: null,
      requestId: null,
      host: null
    }
    export function put (name, File) {
      try {
        return new Promise((resolve, reject) => {
          if (!stsInfo.stsToken) {
            return csyApi.stsToken().then(result => {
              stsInfo = result.result
              resolve(stsInfo)
            })
          } else {
            resolve(stsInfo)
          }
        }).then(stsInfo => {
          const client = new OSS({
            region: 'oss-cn-shanghai',
            accessKeyId: stsInfo.accessKeyId,
            accessKeySecret: stsInfo.accessKeySecret,
            bucket: stsInfo.bucketName,
            stsToken: stsInfo.securityToken
          })
          return client.put(stsInfo.dir + name, File)
        })
      } catch (e) {
        console.log(e)
      }
    }
    
    

    组件 部分代码

    **********************************
    <a-upload
          :disabled="initData.disabled"
          name="avatar"
          listType="picture-card"
          class="avatar-uploader"
          :showUploadList="false"
          :customRequest="customRequest"
          :beforeUpload="beforeUpload"
          @change="handleChange"
        >
          <img class="nomal" v-if="imageUrl" :src="imageUrl" alt="avatar" />
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">上传照片</div>
          </div>
        </a-upload>
    **********************************
    <script>
    import { put } from '@/util/upload'
    export default {
      name: 'SUpload',
      data () {
        return {
          loading: false,
          imageUrl: ''
        }
      },
      props: {
        initData: {
          type: Object,
          required: true
        },
        formItemLayout: {
          type: Object,
          default: () => {
            return { Col: {
              md: 12
            },
            labelCol: {
              md: 24
            },
            wrapperCol: {
              md: 24
            } }
          }
        }
      },
      methods: {
        customRequest (action) {
          const file = action.file
          put(new Date().valueOf() + parseInt(Math.random() * 10000) + file.name.substring(0, 20), file).then(result => {
            this.loading = false
            this.imageUrl = result.url
          }).catch(e => {
            this.log('异常')
            put(new Date().valueOf() + parseInt(Math.random() * 10000) + file.name.substring(0, 20), file).then(result => {
              this.loading = false
              this.imageUrl = result.url
            })
          })
        },
        handleChange (info) {
          if (info.file.status === 'uploading') {
            this.loading = true
          }
        },
        beforeUpload (file) {
          const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
          if (!isJpgOrPng) {
            this.$message.error('只允许上传图片')
          }
          const isLt10M = file.size / 1024 / 1024 < 10
          if (!isLt10M) {
            this.$message.error('图片最大10MB!')
          }
          if (isJpgOrPng && isLt10M) {
          }
          return isJpgOrPng && isLt10M
        }
      }
    }
    </script>
    

    结束

    有什么代码的错误 欢迎指正

    展开全文
  • Vue上传阿里云OSS(STS方式)

    千次阅读 2019-06-18 18:25:12
    一、准备工作 1. 开通阿里云OSS服务,从控制台上获取AccessKeyId和... stsToken: data.stsToken, bucket: data.bucket }) } //testUpload.vue 将文件拖到此处,或点击上传 上传文件大小不能超过 1G 完成上传

    一、准备工作

    1. 开通阿里云OSS服务,从控制台上获取AccessKeyId和AccessKeySecret。

    2. 创建Bucket,并登录OSS控制台

    3. 配置Bucket (很重要)

    • 将allowed origins(来源)设置成 *
    • 将allowed methods(允许methods)设置成 PUT, GET, POST, DELETE, HEAD
    • 将allowed headers(允许headers)设置成 *
    • 将expose headers(暴露headers)设置成 ETag   (这里需要换行)  x-oss-request-id

     

     

    可参考阿里官方文档:https://help.aliyun.com/docum...

    二、引入ali-oss

    有两种方式:

    1. 在HTML文件的<head>中包含如下标签:

    <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.1.min.js"></script>

    2. 项目中安装ali-oss

    npm install ali-oss --save

    可参考阿里官方文档:https://github.com/ali-sdk/al...

    这里使用第二种。

    三、使用OSS

    关于直传,阿里官方给了三种方案:

    1. 客户端 JavaScript 签名后直传;
    2. 客户端申请服务端签名,然后打包上传;
    3. 客户端申请服务端签名,打包上传OSS后回调服务端。

    这里使用第一种。

    vue中使用步骤:

    1. 在src目录中创建utils文件夹
    2. utils文件夹中创建Client.js
    3. 在组件中创建testUpload.vue文件
    //Client.js 
    const OSS = require('ali-oss');
    
    export default function Client(data) {
        //后端提供数据
        return new OSS({
            region: data.region,  //oss-cn-beijing-internal.aliyuncs.com
            accessKeyId: data.accessKeyId,
            accessKeySecret: data.accessKeySecret,
            stsToken: data.stsToken,
            bucket: data.bucket
        })
    }

     

    //testUpload.vue 
    <template>
        <!--在此处添加渲染的内容-->
        <div>
            <el-upload
                    class="upload-demo"
                    ref="upload"
                    drag
                    :before-upload="beforeUpload"
                    :on-success="handleSuccess"
                    :http-request="handleHttpRequest"
                    :headers="uploadHeaders"
                    :limit="files"
                    :disabled="disabled"
                    multiple
                    action=""
                    :file-list="fileList">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
                <div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div>
            </el-upload>
        </div>
    </template>
    
    <script type="text/ecmascript-6">
        import Client from '../../utils/Client'
        //将渲染的内容导出
        export default{
            props: {},
            data(){
                return {
                    region: 'oss-cn-beijing',
                    bucket: '',//这里选择OSS容器
                    percentage: 0,
                    url: '',//后台获取token地址
                    ClientObj: null,
                    dataObj: {},
                    expiration: '',
                    fileList: [],
                    files: 10,
                    uploadHeaders: {
                        authorization: '*'
                    },
                    disabled: false,
                }
            },
            methods: {
                getDate(){
                    const date = new Date(),
                        year = date.getFullYear(),
                        month = date.getMonth() > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`,
                        day = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`,
                        hh = date.getHours() > 9 ? date.getHours() : `0${date.getHours()}`,
                        mm = date.getMinutes() > 9 ? date.getMinutes() : `0${date.getMinutes()}`;
                        return `${year}${month}${day}${hh}${mm}`;
                },
                getAliToken(){ //获取Token
                    return new Promise((resolve, reject) => {
                        this.$axios({
                            method: 'POST',
                            url: this.url
                        }).then(res => {
                            if (res.success) {
                                const {expiration, tempAk, tempSk, token} = res.data;
                                this.expiration = expiration;
                                this.dataObj = {
                                    region: this.region,
                                    bucket: this.bucket,
                                    accessKeyId: tempAk,
                                    accessKeySecret: tempSk,
                                    stsToken: token
                                };
                                resolve(true);
                            } else {
                                reject(false);
                            }
                        }).catch(err => {
                            console.log(err);
                            reject(false);
                        })
                    })
                },
                beforeUpload(file){
                    return new Promise((resolve, reject) => {
                        this.getAliToken().then(response => {
                            if (response) {
                                resolve(response);
                            } else {
                                reject(response);
                            }
                        }).catch(err => {
                            console.log(err);
                            reject(err);
                        });
                    })
                },
                async handleHttpRequest(option){ //上传OSS
                    try {
                        let vm = this;
                        vm.disabled = true;
                        const client = Client(this.dataObj), file = option.file;
                        //随机命名
                        const random_name = this.random_string(6) + '_' + new Date().getTime() + '.' + file.name.split('.').pop();
                        // 分片上传文件
                        await client.multipartUpload(random_name, file, {
                            progress: async function (p) {
                                let e = {};
                                e.percent = p * 100;
                                option.onProgress(e)
                            }
                        }).then(({res}) => {
                            console.log(res);
                            if (res.statusCode === 200) {
                                // option.onSuccess(ret)
                                return res.requestUrls
                            } else {
                                vm.disabled = false;
                                option.onError('上传失败');
                            }
                        }).catch(error => {
                            vm.disabled = false;
                            option.onError('上传失败');
                        });
    
                    } catch (error) {
                        console.error(error);
                        this.disabled = false;
                        option.onError('上传失败');
                    }
                },
                handleSuccess(response, file, fileList){
                    console.log(response);
                    console.log(file);
                    console.log(fileList);
                },
                // 随机生成文件名
                random_string(len) {
                    len = len || 32;
                    let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz12345678', maxPos = chars.length, 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);
                    }
                }
            },
            components: {},
            computed: {},
            watch: {},
            created(){
                this.getAliToken();
            },
            mounted(){
            },
    
        }
    </script>
    
    <style scoped>
        /**渲染内容的样式**/
    
    </style>

     

    完成上传

     

    展开全文
  • 第一次接触stylus对于不使用{} ;...下边讲解几点内容1、要给lang定义stylus2、vue文件中引入stylus文件@import '~assets/style/varibles.styl'3、自定义样式和使用在styl文件中设置通用样式$bgColor = #00bcd4在v...

    第一次接触stylus

    对于不使用{} ; 等符号,感觉还不太习惯。

    而且层级之间的类,也要错落有致,不是统一排一列。额。。。。

    但是它更简洁,规范,便于维护。

    下边讲解几点内容

    1、要给lang定义stylus

    2、vue文件中引入stylus文件

    @import '~assets/style/varibles.styl'

    3、自定义样式和使用

    在styl文件中设置通用样式

    $bgColor = #00bcd4

    在vue中引用,$+name

    @import '~style/varibles.styl'

    .header

    background-color: $bgColor

    在styl文件中将多个样式集合成一个样式

    ellipsis()

    overflow: hidden

    white-space: nowrap

    text-overflow: ellipsis

    在vue中引用,$+name

    @import '~style/varibles.styl'

    .header

    background-color: $bgColor

    ellipsis()

    4、使用@media

    // 最大330px

    @media (max-width : 330px)

    .home-index

    margin-top: -56%

    // 最大最小的多个使用

    @media (max-width : 410px) and (min-width : 330px), (max-width : 630px) and (min-width : 510px)

    .home-index

    margin-top: -56%

    展开全文
  • 首先我的项目是Vue,人家的官网上面也提到了这个东西 阿里云这里面有demo,参照demo的方式我进行上传, 将代码进行修改后,大概是这个样子的 因为vue使用的组件化开发,所以要将依赖进行模块化引入,然后将上传文件的样式...
  • STS临时授权访问OSS:STS临时授权访问OSS STS接入地址:STS接入地址 报错Error: Please set the etag of expose-headers in OSS解决:报错Error: Please set the etag of expose-headers in OSS "npm ERR! Error: ...
  • antd-vue upload组件使用ali-oss sts上传图片 引入 js 组件 部分代码 结束 引入 npm install ali-oss js 出现异常时,重新获取一下sts的token import OSS from 'ali-oss' import { csyApi } ...
  • 在做springboot项目时,公司要求是springboot+gradle+mybatis+vue,同时,我又习惯了用ecplise来开发, 在网上找了许多资料都不是很全, 于是自己经过磕磕碰碰的尝试整合,终于基于要求做了一个简单的用户管理...

空空如也

空空如也

1 2 3
收藏数 56
精华内容 22
关键字:

stsvue

vue 订阅