阿里云oss 前端+后台方式-前端部分el-upload

vue注意

axios封装接口为异步请求，使用el-upload默认上传，在before-upload里请求需要使用同步，保证先获取token再上传。

oss注意

1.过期时间设置久一点，默认30s。
2.本地连接测试去掉callback，不然就会报错private adress ...。
3.key格式为dir值加filename即xxx/a.png，格式不对会被处理成上传内容为空，存不进去，返回码正确。
4.设置succes_action_status为200，默认返回204。
5.保证file在提交内容中是最后一个。

<template>
  <el-form>
    <el-form-item prop="Video">
      <label class="el-form-item__label">视频/图片上传</label>
      <el-upload
        ref="fileref"
        :action="url"
        :on-change="fileUpload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :on-exceed="handleExceed"
        :on-progress="handleProgress"
        :data="params"
        :limit="limit"
        :file-list="fileList"
        :auto-upload="false"
      >
        <el-icon class="el-icon--upload"
          ><svg
            class="icon"
            width="200"
            height="200"
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            data-v-365b8594=""
          >
            <path
              fill="currentColor"
              d="M544 864V672h128L512 480 352 672h128v192H320v-1.6c-5.376.32-10.496 1.6-16 1.6A240 240 0 0164 624c0-123.136 93.12-223.488 212.608-237.248A239.808 239.808 0 01512 192a239.872 239.872 0 01235.456 194.752c119.488 13.76 212.48 114.112 212.48 237.248a240 240 0 01-240 240c-5.376 0-10.56-1.28-16-1.6v1.6H544z"
            ></path></svg
        ></el-icon>
        <div class="el-upload__text"><em>点击上传</em> 音频视频</div>
        <template #tip>
          <div class="el-upload__tip">
            <i class="iconfont icon-prompt"></i>
            支持的格式：JPG，PNG，MP4，MP3，GIFT最大100MB
          </div>
        </template>
      </el-upload>

      <el-progress
        v-show="showProgress"
        :text-inside="true"
        :stroke-width="15"
        :percentage="progress"
      ></el-progress>
    </el-form-item>
  </el-form>
  <el-button type="primary" size="small" @click="submitFile">提交</el-button>
</template>
<script>
import {  onMounted, ref } from "vue";
import { getOSSToken, doOSSupload } from "../api/request";
import { ElMessage } from "element-plus";
export default {
  name: "UpLoad",
  props: {
    limit: {
      type: Number,
      default: 1,
    },
  },
  setup(props, { emit }) {
    const fileref = ref(null);
    const fileList = ref([]); //文件列
    const showProgress = ref(false); //进度条的显示
    const dataObj = ref({}); //存签名信息
    const progress = ref(0);
    const limit = ref(1);
    const url = ref("http://nft-marketplace.oss-cn-beijing.aliyuncs.com/");
    let params = ref({});
    // 文件超出个数限制时的钩子
    function handleExceed(files, fileList) {
      ElMessage({
        showClose: true,
        message: `每次只能上传 ${limit.value} 个文件`,
        type: "error",
      });
    }
    // 点击文件列表中已上传的文件时的钩子
    function handlePreview(file) {}
    //文件上传前的校验
    function beforeAvatarUpload(file) {
      const isLt100M = file.size / 1024 / 1024 < 1024;
      const isLt30 = file.name.length < 30;
      console.log(file.raw.type);
      if (
        [
          "video/mp4",
          "audio/mp3",
          "image/jpg",
          "image/jpeg",
          "image/png",
          "image/gif",
        ].indexOf(file.raw.type) == -1
      ) {
        ElMessage({
          showClose: true,
          message: "请上传正确的格式",
          type: "error",
        });
        return false;
      }
      if (!isLt100M) {
        ElMessage({
          showClose: true,
          message: "上传大小要在0~1GB之间哦!",
          type: "error",
        });
        return false;
      }
      if (!isLt30) {
        ElMessage({
          showClose: true,
          message: "上传文件名称长度必须要小于30个文字哦!",
          type: "error",
        });
        return false;
      }
    }
    function emitInput(val) {
      emit("input", val);
    }
    function handleRemove(file, fileList) {
      emitInput("");
    }
    function getToken(file) {
      getOSSToken().then((res) => {
        if (res.code == 200) {
          let obj = JSON.parse(res.data);
          params.value.dir = obj.dir;
          params.value.host = obj.host;
          params.value.policy = obj.policy;
          params.value.OSSAccessKeyId = obj.accessid;
          params.value.signature = obj.signature;
          //params.value.callback = obj.callback;
          params.value.succes_action_status="200";
          params.value.key = obj.dir+"${filename}";
          params.value.expire = parseInt(obj.expire);
          params.value.file = file.raw;
          //console.log(params.value);
        }
      });
    }
    function fileUpload(file) {
      beforeAvatarUpload(file);
      getToken(file);
    }
    function handleSuccess(res, file) {
      console.log("上传成功...");
      fileList.value.pop();
      /*fileList.value.push({
        name: file.name,
        url:
          url.value + "/" + params.value.key.replace("${filename}", file.name),
      });*/
      //emitInput(fileList.value.url);
    }
    function submitFile() {
      //若调用组件上传
      //fileref.value.submit();
      /*for(let key in params.value){
        let data=FormData();
        data.append(key,params.value[key])
      }*/
      console.log(params.value);
      params.value.key.replace("${filename}", params.value.file.name)
      doOSSupload(params.value.host,params.value,"OSS "+params.value.OSSAccessKeyId+":"+params.value.signature).then((res) => {
        console.log(res);
      });
    }
    function handleProgress(event, file) {
      console.log(event);
      console.log(file);
    }
    onMounted(() => {});
    return {
      fileList,
      showProgress,
      dataObj,
      progress,
      handleExceed,
      handlePreview,
      handleSuccess,
      beforeAvatarUpload,
      fileUpload,
      url,
      handleRemove,
      submitFile,
      fileref,
      params,
      handleProgress,
      getToken,
    };
  },
};
</script>