Vue（web）服务端签名上传阿里云oss

Vue（web）服务端签名上传阿里云oss

1、示例

oss文档

<template>
  <div class="upload-container">
    <div style="padding-bottom: 10px">仅支持 .png,.jpg 格式的图片文件</div>
    <el-upload
      :multiple="false"
      :show-file-list="false"
      :http-request="upload"
      drag
      action
      accept=".png,.jpg"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      imageUrl: "",
    };
  },
  methods: {
    upload({ file }) {
      this.$request({
        url: "", // 获取服务端签名的URL
        params: {
          dir: "你获取签名的设置的路径",
        },
      }).then((res) => {
        /**
         *res.data = {
         *	dir:'',
         *	accessid:'',
         *	policy:'',
         *	signature:'',
         *}
         */
        this.axiosOSS(res.data, file);
      });
    },
  },
  axiosOSS(sing, file) {
    const dir = 设置上传oss的路径;
    const formData = new FormData();
    formData.append("key", sing.dir + `${dir}`);
    formData.append("OSSAccessKeyId", sing.accessid);
    formData.append("policy", sing.policy);
    formData.append("signature", sing.signature);
    formData.append("success_action_status", "200"); // 上传成功返回的状态码，不设置则是204
    formData.append("file", file); // 一定在最后
    return new Promise((resolve, reject) => {
      axios({
        method: "POST",
        url: "oss域名",
        data: formData,
        headers: {
          "Content-Type": "image/jpeg", // 图片格式，可以设置视频或者音频格式
        },
      })
        .then((response) => {
          let data = {};
          if (response.status == 200) {
            const imageUrl = "oss域名" + sing.dir + dir;
            data = {
              code: response.status,
              msg: "上传成功",
              imageUrl,
            };
            resolve(data);
          } else {
            data = {
              code: response.status,
              msg: "上次失败，请重试",
            };
            reject(error);
          }
        })
        .catch((error) => {
          reject(error);
        });
    });
  },
};
</script>

注意：

1. 上传需要设置oss跨域问题

   2.本人开发的时候遇到axios的坑个人编码风格