vue 引入vant 上传图片oss处理

<van-uploader :before-read="beforeRead"  v-model="product.images" max-size="1024*1024*2" max-count="1">
   <img
    src="@/assets/images/icon_upload.png"
    class="companyLogo"
    alt=""
   />
   <div>上传图片</div>
</van-uploader>

import { client, GetGUID } from "@/utimethods:{

beforeRead(file) {
      if (!file) {
        return false;
      }
      let suffix = file.name.split(".");
      let name = suffix[suffix.length - 1];
      if (
        name.indexOf("jpg") == -1 &&
        name.indexOf("jpeg") == -1 &&
        name.indexOf("png") == -1
      ) {
        name = `${this.systemCoding}/accessory/${GetGUID()}.${name}`;
      } else {
        name = `${this.systemCoding}/picture/${GetGUID()}.${name}`;
      }
      client.put(name, file).then((res) => {
        this.ImageUrl = res.url
      });
    },
}

utils/oss.js 文件

let OSS = require('ali-oss')
export let client = new OSS({
    region: 'oss-cn-guangzhou',
    accessKeyId: 'LTAI5tA55SWLfUnqAf6X3e8S',
    accessKeySecret: 'im5wJn3wsmhp02QiPkvLA6HPWERRbj',
    bucket: 'synergia',
})
export const GetGUID = () => {
    return "xxxxxxxx-xxxx"
        .replace(/[xy]/g, function(c) {
            var r = (Math.random() * 16) | 0,
                v = c == "x" ? r : (r & 0x3) | 0x8
            return v.toString(16)
        })
        .toUpperCase()
}