vue 上传文件到阿里云OSS

步骤一:安装依赖ali-oss

npm install ali-oss -S

步骤二:配置oss对象

const OSS = require('ali-oss')

const client = new OSS({
    // yourregion填写Bucket所在地域。以华东1(杭州)为例,Region填写为oss-cn-hangzhou。
    region: 'oss-cn-beijing',
    accessKeyId: '****',
    accessKeySecret: '****',
    // 填写Bucket名称。
    bucket: '****',
  });

步骤三:封装一个Promise上传函数

/**
 * 
 * @param {object}   file file文件对象
 * 
 */  
 function uploadFile(file){

      return new Promise((resolve,reject) =>{
        
        //获取文件类型
        let fileType = file.type.split('/')[1];
        // 制作文件名
        let fileName = new Date().getTime() + Math.floor(Math.random() * 150) + '.'+fileType;
        // 上传,(注意 不能这么写client().multipartUpload())
        client.multipartUpload(fileName, file).then(result =>{
            console.log(result,'oss返回')
           
            //此处为返回文件名称:域名(https://sike-linbao.oss-cn-beijing.aliyuncs.com/) + 文件名 
			let onlinePath =config.aliyunConfig.uploadImageUrl + result.name;
            resolve(onlinePath)
        }).catch(err =>{
            reject(err)
        })
      })
  }

按照以上的三个步骤,即可上传文件到oss;
下面是完整代码

const OSS = require('ali-oss')

const client = new OSS({
    // yourregion填写Bucket所在地域。以华东1(杭州)为例,Region填写为oss-cn-hangzhou。
    region: 'oss-cn-beijing',
    accessKeyId: '****',
    accessKeySecret: '****',
    // 填写Bucket名称。
    bucket: 'sike-linbao',
  });


/**
 * 
 * @param {object}   file file文件对象
 * 
 */   
  function uploadFile(file){

      return new Promise((resolve,reject) =>{
        
        //获取文件类型
        let fileType = file.type.split('/')[1];
        // 制作文件名
        let fileName = new Date().getTime() + Math.floor(Math.random() * 150) + '.'+fileType;
        // 上传
        client.multipartUpload(fileName, file).then(result =>{
            console.log(result,'oss返回')
           
            //此处为返回文件名称:域名(https://sike-linbao.oss-cn-beijing.aliyuncs.com/) + 文件名
			let onlinePath =config.aliyunConfig.uploadImageUrl + result.name;
            resolve(onlinePath)
        }).catch(err =>{
            reject(err)
        })
            

      })
  }
  
export default uploadFile; 

你可能感兴趣的:(vue,vue,javascript)