vue 上传图片到oss / uniapp上传图片到oss

vue

• 新建js文件

let OSS = require('ali-oss'); //npm 下载ali-oss

let client = new OSS({
/*需要自己去申请*/
accessKeyId: '',
accessKeySecret: '',
bucket: '',
region: '',
});

export async function put (obj) {
//	'tu/'=>在oss上的保存图片的文件夹（自定义一个文件夹名）
let a = 'tu/'+obj.file.name;
let b = obj.file
try {
//object-name可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
let result = await client.put(a, b);
//result.url=>返回的图片在线地址
} catch (e) {
// console.log(e);
}
}

• 图片文件的转换

//base64转blob
dataURLtoBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
//将blob转换为file
blobToFile(theBlob, fileName) {
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
},
// 调用方法转换图片
getpictuer(dataUrl){
var _blob = this.dataURLtoBlob(dataUrl);
var suffix = dataUrl.split(';')[0].split(':')[1].split('/')[1];//文件扩展名
var _filename = String(new Date().getTime())+'.'+suffix;
var _file = this.blobToFile(_blob, filename)
this.file = _file;
this.filename = _file.name;
},

uniapp(JavaScript客户端签名直传)

• oss文档 https://help.aliyun.com/document_detail/31925.html?spm=a2c4g.11186623.6.1546.5f0258abSu5khU
• oss.js

import Crypto from '../components/crypto/crypto.js';
import { Base64 } from '../components/js-base64';
import '../components/crypto/hmac.js';
import '../components/crypto/sha1.js';

let accessid= '自行获取';
let accesskey= '自行获取';
let host = '阿里云仓库地址';

var policyText = {
"expiration": "2050-01-01T12:00:00.000Z", //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
"conditions": [
["content-length-range", 0, 1024 * 1024 * 5] // 设置上传文件的大小限制
]
};
var policyBase64 = Base64.encode(JSON.stringify(policyText))
var message = policyBase64;

var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, { asBytes: true }) ;
var signature = Crypto.util.bytesToBase64(bytes);

export default{
policyBase64,
signature
}

• vue文件

import oss from '上面的oss.js'
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
success:(res)=>{
//res里有图片临时地址
uni.uploadFile({
url:'阿里云地址,
filePath:文件路径,
fileType: 'image',
name: 'file',
formData:{
'name':"name",
'key':'key',
'OSSAccessKeyId':'自行获取',
'policy': oss.policyBase64,
'signature':oss.signature,
'success_action_status' : '200',
},
success:(res)=>{
//成功之后的操作
},
fail: (err) => {
console.log(err)
}
})
}
})

• 需要的crypotjs已上传仓库可以去下载 https://gitee.com/jinguochao/crypotjs