Vue上傳文件到OSS

aliyun-oss-sdk 引入

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

• 注意：這裏看網上有朋友說不能用npm install ali-oss --save的方式用於前端頁面的使用，這裏本身沒有進行測試，感興趣的朋友能夠試試，有結果了但願在下方評論來告知，感謝

上傳方法的封裝

• 在Vue項目中的src文件夾下面本身建立了一個tools的文件夾用於封裝常常用的工具函數與方法，方便調用

• 這裏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', // 默認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平臺配置

• 在平臺的概覽裏面看看本身的基礎設置裏面的讀寫權限是否改成了公共讀，我這邊只有配置公共讀才上傳而且回顯圖片成功，其餘狀況還請朋友告知，謝謝
• 關於跨域訪問的配置

頁面內調用

• 頁面代碼這裏大概寫一下

<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)
        },
}