vue 跨域代理，对象存储（阿里云、aws）预签名上传文件

一、安装axoios

       ①、全局安装axois

#全局安装axios

PS E:\Code\Vues\sha_web\sha_web> npm install axios --g

二、配置跨域代理

        ①、配置跨域代理

 proxyTable: {
      "/sqray-keyan": { //请求地址关键字【只代理含关键字代理】
        target: "http://192.168.10.100:8082",//后端接口地址
        changeOrigin: true //启用代理跨域
      }
    },

       ②、具体截图

三、预签名上传文件

        ①、阿里云

1、阿里云无需如上设置，可通过控制台具体设置。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <input type="file"
           id="file"
           @change="handlerChangeFile" />
    <router-view />
  </div>
</template>

<script>
import request from "axios";

export default {
  name: 'App',
  mounted: () => {

  },
  methods: {

    //文件切换事件
    handlerChangeFile: (ev) => {

      //已选文件
      const file = ev.target.files[0];

      const preSignalURL = "https://apricot.oss-cn-shenzhen.aliyuncs.com/apricot.jpg?Expires=1667621086&OSSAccessKeyId=LTAI5tE49rrKU9iAxwDdzMcD&Signature=qQlzyknGZrD47HGit00LOiXip4k%3D";

      let reader = new FileReader();

      //加载文件流
      reader.onload = (buf) => {
        debugger
        // xhr.send(buf.target.result)
        request.head()
        request.put(preSignalURL)
          .then(res => {
            console.log("complete");
          });
      };

      //读取文件流
      reader.readAsArrayBuffer(file);
    }
  }
}
</script>

       ②、Aws

1、文章环境对象存储存在跨域，需设置跨域，具体环境具体设置。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <input type="file"
           id="file"
           @change="handlerChangeFile" />
    <router-view />
  </div>
</template>

<script>
import request from "axios";

export default {
  name: 'App',
  mounted: () => {

  },
  methods: {

    //文件切换事件
    handlerChangeFile: (ev) => {

      //已选文件
      const file = ev.target.files[0];

      const preSignalURL = "http://localhost:8080/apricot/apricot.jpg?AWSAccessKeyId=HYIHVY9WF5S553G80J82&Expires=1667619377&Signature=tBfNeSYyfXH5%2FimChC5hIlASaeA%3D";

      let reader = new FileReader();

      //加载文件流
      reader.onload = (buf) => {
        // xhr.send(buf.target.result)
        request.head()
        request.put(preSignalURL
          , buf.target.result
          , {
            headers: {
              "Content-Type": "application/octet-stream"
            }
          })
          .then(res => {
            console.log("complete");
          });
      };

      //读取文件流
      reader.readAsArrayBuffer(file);
    }
  }
}
</script>