vue element 实现直连上传阿里OSS

vue element 实现直连上传阿里OSS

下载依赖+引入依赖

npm install ali-oss
import OSS from 'ali-oss';

template

<el-upload
  action=""
  multiple
  :limit="1"
  :http-request="ossFileupload"
  >
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

methods

ossFileupload(param){
		//param携带上传的所有参数
		//取得文件
       let file = param.file
       //取得文件名
       let fileName = file.name
      console.log("ossFileupload");
      //getOssToken我后端返回给前端临时的token ，也可以自己组建参数
       getOssToken().then((res)=>{
        let ossconfig = res.data;
          const client = new OSS({
              // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
              region: ossconfig.region,
              // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
              accessKeyId: ossconfig.accessKeyId,
              accessKeySecret: ossconfig.accessKeySecret,
              // 从STS服务获取的安全令牌（SecurityToken）。
              stsToken: ossconfig.stsToken,
              // 填写Bucket名称，例如examplebucket。
              bucket: ossconfig.bucket
          });
          // console.log("filename==》",fileName,file)
          //这里可以自定义上传的路径，在阿里云就是不同路径
          let aa = client.put(fileName,file)
          console.log("aa==>",aa);
      });
    },

总结

查看官方文档才是最有效的学习方式
https://help.aliyun.com/document_detail/64047.html

---

注意el-upload的http-request属性，里面函数可以传递参数
https://element.eleme.cn/#/zh-CN/component/upload#dian-ji-shang-chuan

演示

全部代码

<template>
<div id="oss-container">
  <div >我的OSS实例</div>

<video width="320" height="240" :src="videourl" controls="controls">
your browser does not support the video tag
</video>


  <!-- <div > <input  :v-model="filename" type="file"/> <button   @click="mySout" >确定上传</button></div> -->
 <div >
   <el-upload
  action=""
  multiple
  :limit="1"
  :http-request="ossFileupload"
  >
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</div>

</div>

</template>

<script>

import { getViedourl,getOssToken } from "@/api/learn/oss";
import OSS from 'ali-oss'
export default {
  name: "Oss",
  data() {
    return {
      videourl:'',
      filename:'',
      fileList: [],
    };
  },
  created() {
   this.inivideourl()
  //  this.ossFileupload()
  },
  methods: {
    inivideourl(){
       console.log("inivideourl")
      getViedourl().then((res)=>{
        this.videourl = res.msg
      });
    },

    ossFileupload(param){
       let file = param.file
        let fileName = file.name
      console.log("ossFileupload");
       getOssToken().then((res)=>{
        let ossconfig = res.data;
    
          const client = new OSS({
              // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
              region: ossconfig.region,
              // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
              accessKeyId: ossconfig.accessKeyId,
              accessKeySecret: ossconfig.accessKeySecret,
              // 从STS服务获取的安全令牌（SecurityToken）。
              stsToken: ossconfig.stsToken,
              // 填写Bucket名称，例如examplebucket。
              bucket: ossconfig.bucket
          });
          // console.log("filename==》",fileName,file)

          let aa = client.put(fileName,file)
          console.log("aa==>",aa);
      });
    },
  }
};
</script>


<style scoped>

#oss-container{
  background-color: aqua;
  line-height:50px;
  vertical-align:middle;
  text-align:center
}

</style>