vue+vant(有赞)ui直传阿里oss

公司有需求，要用vue做一个后h5的项目，我选用的是vant组件库，要由前端直传oss，在做的时候，也遇到了点问题，于是就记录一下，不废话直接代码

首先要在阿里云配置好相关配置，具体看官网

第一步

安装模块

npm install ali-oss

第二部

在utils文件夹下新建alioss.js文件，相关配置

var OSS = require('ali-oss');
export function client() {
    var client = new OSS({
      EndPoint: 'xxxxxxx',
    //   region: 'oss.fg.tech',
      accessKeyId: 'xxxxxxx',
      accessKeySecret: 'xxxxxxx',
      bucket: 'FG'
    })  //后端提供数据
    return client
  }

html部分代码

<div class="uploader">
   <van-uploader v-model="fileList" :max-count="2" :after-read="afterReadIdCard" />
 </div>

js部分代码

import { client } from '../../../utils/alioss';

afterReadIdCard(file) {
      file.status ='uploading'
      file.message = '上传中...';
      let len = len || 32;
      var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
      var maxPos = $chars.length;
      var pwd = '';
      for (let i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos)); // 生成32位随机字符
      }
      let name = file.file.name
      var pos = name.indexOf('.');
      let type =name.substr(pos);
      var fileName = `${Date.parse(new Date())}`+pwd+type // 文件名称（时间戳+随机字符+后缀）
      client().multipartUpload(fileName,file.file).then(res=>{
        console.log('res',res.res.requestUrls[0])
        let imageUrlObj ={}
        imageUrlObj.fileName = res.res.requestUrls[0]
        imageUrlObj.fileUrl = res.res.requestUrls[0]
        imageUrlObj.fileType = 1
        imageUrlObj.type = 1
        this.imageUrlIdCard = imageUrlObj
        this.submitFile()  //调后端接口，将oss返回的数据传给后端存储倒库
        file.status =''
        file.message = '';
      }).catch((err) => {
        console.log(err)
      })
        console.log(file);
    },

暂时就这么多，哪里不对的，请多多指教
我是一个前端小白，刚从学校出来，代码不是很规范，敬请谅解