最近上手的一个商城,里面用的图片上传功能是从web端传到服务器的,再从服务器中转到阿里云oss,这样的话有点浪费服务器的带宽,增加服务器压力

就改了一下,把原来的图片上传改为sts直传阿里云,传上去后,再把图片的url传到服务器保存,就不用经过服务器中传图片文件了

把代码稍微列一下,

首先加一个单独的封装文件.aliyun.js,在这之前,请先npm install ali-oss 加载阿里的包

import OSS from "ali-oss";
//aliyun oss上传
export const AliyunUpload = (file, info) => {
    info = JSON.parse(info)
    console.log(info)
    let oss = new OSS({
        region: info.region,  //节点,oss-cn-beijin
        //下面的三个都是服务器sts获取授权后的信息
        accessKeyId: info.accessKeyId,  
        accessKeySecret: info.accessKeySecret,
        stsToken: info.stsToken,
        bucket: info.bucket  //bucket里面
    })
    // 文件名称
    let fileName = file.name;
    // 文件后缀
    let suffix = fileName.split('.').pop().toLowerCase();
    let rand=Math.floor(Math.random () * 899) + 100  //999内的随机数
    // 按照时间戳生产key
    let t=new Date().getTime()
    //拼接字符串
    let newFileName ="pic/"+ t +rand + "." + suffix;
    //let res = oss.put(newFileName,file);
    return oss.multipartUpload(newFileName, file)
}

然后再到上传组件里面的方法调用,在这之前,先获取一下阿里云sts的token等信息保存进cookie里面去了,所以这里的方法直接调用getCookies里面

 :before-upload="beforeUpload"  //上传前调用beforeUpload方法
 
 //引入aliyun包
 import { AliyunUpload } from "@/libs/aliyun";
 
     beforeUpload(file) {
      //这个应该换到缓存里面,在这之
      let info = getCookies("alists");
      AliyunUpload(file, info).then((res) => {
        if (res.res.status == 200) {
         let url=res.res.requestUrls[0]
          let imginfo = {
            name: res.name.replace(/pic\//, ""),
            realname:file.name,
            filetype:1,//文件类型,1图片
            imgtype:3,//阿里云
            attdir: url.replace(/http:/, "https:"),//图片的绝对地址.http替换成https
            sort:this.treeId
          };
        //图片上传到阿里云后,保存到服务器,并且返回最新的图片列表,再调用filedd方法处理新数据
         upImgApi(imginfo).then(resinfo=>{
            this.filedd(resinfo.data.list)
          this.total = res.data.count;
           console.log(resinfo)
           })
        } else {
          this.$Message.error("上传错误");
        }
      });

      return false;
    },

其中用golang的获取sts信息,在这之前,请先go get "github.com/aliyun/alibaba-cloud-sdk-go/services/sts"

endpoint := "cn-beijing"
    bucket := "hua121"
    rolearn := "acs:ram::124511:role/aliyunoss"
    accessKeyId := "LTAI4G2R2m11r4TFYg"
    accessKeySecret := "gb6G9sWSY2Zqk124221SKWU3GNxi"
    //构建一个阿里云客户端, 用于发起请求。
 &n

   
         

          
         
         

          
本文来自投稿，不代表本人立场，如若转载，请注明出处；如有问题您可以发邮件到：itlun@qq.com