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