其他分享
首页 > 其他分享> > vue 引入want 上传图片oss处理

vue 引入want 上传图片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,name,want,oss,let,file,GetGUID,suffix
来源: https://www.cnblogs.com/anna001/p/16221047.html