• vue2上传图片到OSS


    第一步:安装阿里云OSS

    <!-- 引入在线资源 -->
    <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-x.x.x.min.js"></script>
    
    <!-- 引入本地资源 -->
    <script src="./aliyun-oss-sdk-x.x.x.min.js"></script>
    

    注意:

    • x.x.x代表版本号,具体版本信息可在这访问查看
    • 引入在线资源方式依赖于CDN服务器的稳定性,推荐用户使用离线方式引入,即通过本地资源或自行构建的方式

    也可使用npm安装SDK

    npm install ali-oss

    第二步:安装完成后使用

    可使用 import 或 require 进行引用。

    region,accessKeyId,stsToken,bucket需要后端同事提供接口获取,其中region是阿里云所在区域,登录阿里云右上角能查看,例如“oss-cn-hangzhou”,bucket是阿里云仓库的名称

    let OSS = require('ali-oss');
    let client = new OSS({
      region: '<oss region>',
     accessKeyId:'your accessKeyId',
     stsToken:'your stsToken',
     bucket:'your bucket name'
    });

    第三步:上传

    your_route是你要上传文件夹的路径,后端同事可以返给你也可以自己拼接,我这里是自己拼接的,比如你的bucket下有个文件夹叫pc,你要上传到pc这个文件夹下,your_route就是‘/pc/’,file是你的上传的file
    其中分片上传如果图片大于100k,返回的路径最后会自动带一个?uploadId=***********之类的参数,我在这里是自己截取处理了一下
              //文件名
                        const storeAs = 'your_routte' + file.name;   
                        client.multipartUpload(storeAs, file, {
    
                        }).then(results => {
                            //console.log(results)
                            if(results.res.requestUrls[0].indexOf('?') != -1){
                                this.url = results.res.requestUrls[0].split('?')[0];
                            }else{
                                //console.log('图片100k以内')
                                this.url = results.res.requestUrls[0]
                            }
                            Toast('头像上传成功');
                        }).catch((err) => {
                            console.log(err);
                        }); 
    
    
    
    
  • 相关阅读:
    csu 1503: 点弧之间的距离-湖南省第十届大学生计算机程序设计大赛
    Android MediaPlayer 和 NativePlayer 播放格式控制
    国内互联网企业奇妙招数
    [Oracle] Insert All神奇
    代码杂记
    R.layout.main connot be resolved 和R.java消失
    计算机安全篇(1)
    深入浅出谈开窗函数(一)
    PHP JSON_ENCODE 不转义中文汉字的方法
    c#indexof使用方法
  • 原文地址:https://www.cnblogs.com/woshidouzia/p/9329720.html
Copyright © 2020-2023  润新知