aliyun-oss-sdk 引入###

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

1
注意：這里看網(wǎng)上有朋友說不能用npm install ali-oss --save的方式用于前端頁面的使用批狱，這里自己沒有進(jìn)行測試渊季，感興趣的朋友可以試試蜂莉，有結(jié)果了希望在下方評(píng)論來告知道批，感謝
上傳方法的封裝
這里OSS上傳的方法封裝到了oss.js文件中
直接上代碼

import co from 'co'

const OSSConfig = {
    uploadHost: 'http://jinanluke.oss-cn-beijing.aliyuncs.com', //OSS上傳地址
    type: 'scs',
    ossParams: {
        region: 'oss-cn-beijing',
        success_action_status: '200', // 默認(rèn)200
        accessKeyId: '私人accessKeyId',
        accessKeySecret: 'accessKeySecret',
        bucket: '私人bucket',
    },
}

function random_string(len) {
    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))
    }
    return pwd
}

/**
 *
 * @param event 上傳圖片的資源路徑
 * @param type 圖片資源類型
 * @param dir oss要保存的文件夾
 * @returns {OSS文件路徑}
 */

function uploadOSS(event, type,dir = 'file/') {
    return new Promise((resolve, reject) => {
        var client = new OSS({
            region: OSSConfig.ossParams.region,
            accessKeyId: OSSConfig.ossParams.accessKeyId,
            accessKeySecret: OSSConfig.ossParams.accessKeySecret,
            bucket: OSSConfig.ossParams.bucket,
        });
        var file;
        if (type == 0) {
            file = event;
        } else {
            file = event.target.files[0];
        }
        let randomName = `${dir}${random_string(6)}_${file.name}`;
        co(function* () {
            var result = yield client.multipartUpload(randomName, file);
            console.log(`${OSSConfig.uploadHost}/${result.name}`);
            resolve(`${OSSConfig.uploadHost}/${result.name}`);
        }).catch(function (err) {
            console.log(err);
            reject(err);
        });
    });
}

export { uploadOSS }

OSS平臺(tái)配置###

20190618215800211.png

在平臺(tái)的概覽里面看看自己的基礎(chǔ)設(shè)置里面的讀寫權(quán)限是否改為了公共讀悬荣，我這邊只有配置公共讀才上傳并且回顯圖片成功，其他情況還請(qǐng)朋友告知秉宿，謝謝
關(guān)于跨域訪問的配置

頁面內(nèi)調(diào)用###

頁面代碼這里大概寫一下
<div class="wrapper">
    <span class="text">頭像</span>
    <div class="img" @click.stop="uploadHeadImg">
       <img :src="userData.img" width="40" height="40" alt="">
       <i class="icon"></i>
    </div>
  <input type="file" id="file" accept="image/*" @change="handleFile" class="hiddenInput" />
</div>
import { uploadOSS } from '@t/oss'
methods: {
    async handleFile(event) {
            this.imgUrl = await uploadOSS(event)
        },
}

原文鏈接：[https://blog.csdn.net/AsdfgJiao/article/details/92800701]