vue实现oss上传

最新推荐文章于 2025-04-25 14:42:35 发布

于丸

最新推荐文章于 2025-04-25 14:42:35 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/Ych_cxy/article/details/98730179

vue 专栏收录该内容

21 篇文章

订阅专栏

//js中写入
export default{
	install(Vue){
		Vue.prototype.$ali = {                                             
				//阿里云OSS key参数
                region: 'oss-cn-beijing',
                accessKeyId: 'LTAIcI5PIWHua6L5',
                accessKeySecret: 'K64ojjB8jKqgIcp69Hk9E6IEBeqW3s',
                bucket: 'shujiecaiwu'
            },
       	//Vue.prototype.aliurl = 'https://shujiecaiwu.oss-cn-beijing.aliyuncs.com/'
	}
}

//vue中使用
import OSS from 'ali-oss'
change (file) {
    var _this = this;
    if (file == undefined) {
        return false;
    }
    var fName = file.name,
    //取文件的后缀名
    suffix = fName.substr(fName.lastIndexOf(".")),
    nda = 'user-herder' + Date.parse(new Date()) / 1000,
    storeAs = nda + suffix;
    var client = new OSS.Wrapper(this.$ali);
    client.multipartUpload(storeAs, file.raw).then(result=> {
        // 成功之后的操作
        _this.invoicePhoto1 = result.res.requestUrls[0].split('?')[0];
       
    }).catch(function (err) {
        console.log(err);
        
    });

},