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()

}

巴特西

vue 引入vant 上传图片oss处理

最新文章

热门文章