vue使用阿里云OSS上传附件
上周一被通知更换阿里云存储alioss，公司内多个项目使用微软云储存azureBlob，其实更换起来还是很方便的，只是在前端开发领域中不同框架的差异性及应用的插件版本环境等对alioss这类第三方js库的引入方式及方法函数使用上有点麻烦，无论ng还是vue，引入的方式，无非就是import/require或全局引入js库，然后写个组件或封装js方法，之后便于在项目中多处使用而已。笔者这边开发环境是vue1.0+typescript+wepack1.31.1 因为环境上的落后，项目更改后又要稳定上线，所以就不考虑现阶段的框架升级了。
笔者这边利用了ES6新特性export导出函数作为一个模块，便于在多处调用，因为公司内多个项目在不同的框架下所以这样确实是非常方便其他项目使用，当然你可以在vue或者ng里写个组件。
1.安装并全局引入alioss.js库
npm install ali-oss --save <!-- 阿里云上传服务 --> <script src="../node_modules/ali-oss/dist/aliyun-oss-sdk.min.js"></script>
这边4.12版本以下的不兼容https协议
2.创建一个OssUploadService.ts文件
export function aliupload() {
var fileSize =1500000;//1.5MB
if (this.size) {
this.fileSize =this.size;}
var in_array =function (e) {
var r =new RegExp(','+ e +',');
return (r.test(','+this.join(this.S) +','));};
/**初始化阿里云参数 */
var client =new OSS.Wrapper({
region: 'oss-cn-hangzhou',
accessKeyId: 'Lfdsfdjkffdsfds',
accessKeySecret: 'yRGm57lkOJFRfdsfdfdsfdsfdsfs',
// stsToken: result.data.token.SecurityToken,
bucket: 'xxx'
})
/**上传图片**/
var upload = function (selectedFile, nameimg, cb) {
const file = selectedFile;
const name = nameimg;
var type = name.split('.')[1];
// var storeAs = nameimg;
/** 文件名*/
var storeAs = "upload/" + getUuid() + '.' + type;
var boolean = true;
if (file.size > fileSize) {
bootbox.alert('图片不能超过!' + fileSize / 1000 + 'kb');
return false;
}
// console.log(type, "格式");
if (!/image\/(gif|jpeg|jpg|png|bmp)/.test(type)) {
boolean = false;
}
if (boolean) {
bootbox.alert('上传图片格式不支持!请选择 gif,jpeg,jpg,png,bmp');
return false;
}
client.multipartUpload(storeAs, file,
{
progress: progress
}).then((result) => {
this.url = result;
cb(result);
// console.log(result.res.requestUrls[0].split('?')[0]);
}).catch(function (err) {
console.log(err);
});
};
/**上传进度 */
var progress = function (p) {
return function (done) {
var bar = document.getElementById('progress-bar');
bar.style.width = Math.floor(p * 100) + '%';
bar.innerHTML = Math.floor(p * 100) + '%';
done();
}
};
/**重命名 */
var getUuid = function () {
var len = 32; //32长度
var radix = 16; //16进制
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
var uuid = [],
i;
radix = radix || chars.length;
if (len) {
for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
} else {
var r;
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
uuid[14] = '4';
for (i = 0; i < 36; i++) {
if (!uuid[i]) {
r = 0 | Math.random() * 16;
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
}
}
}
return uuid.join('');
}
/**导出方法 */
return {
upload: upload,
progress: progress
};
};
3.对应的地方调用方法
//引入aliupload模块
import { aliupload } from '../../service/OssUploadService';
/**调用上传方法 */
aliupload().upload(itemUploadData, imgName, (res) => {
console.log(res);//上传完成后返回值
})
view层的页面自定义就行，在页面中去绑定对应的参数值。
参考示例：https://www.jianshu.com/p/645f63745abd
https://github.com/taosin/alioss-js-upload/tree/2.0
https://github.com/rockuw/oss-in-browser
打赏作者↓↓↓
