VUE集成Cos腾讯图片服务器
安装 npm install --save cos-js-sdk-v5 spark-md5
<el-upload
class="upload-demo"
:file-list="newImages"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleAvatarSuccess"
:before-remove="beforeRemove"
:before-upload="beforeAvatarUpload">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
import uploadFile from '../../util/uploadFile'
const bannerOptions = [{
type: 'image/jpeg',
size: 10
}, {
type: 'image/png',
size: 10
}]
beforeAvatarUpload (file) {
let that = this
// console.log('before',that.imgList)
// 显示loading动画
this.imgUpdateImg = true
let isJPG = false
let isLt2M = false
let fileSize = 0
for (let option of bannerOptions) {
if (option.type === file.type) {
isJPG = true
fileSize = option.size
if (option.size > file.size / 1024 / 1024) {
isLt2M = true
}
}
}
if (!isJPG) {
that.$message.error('上传的图片只能是 jpg/png 格式')
that.imgUpdateImg = false
}
if (!isLt2M) {
that.$message.error('上传文件的大小不能超过 ' + fileSize + 'MB!')
that.imgUpdateImg = false
}
this.selectFile(file)
return isJPG && isLt2M
},
selectFile (event) {
console.log(event)
// console.log('selectFile', event.target.files[0].name)
// 调用上传方法,传入选择的文件对象
// this.uploadFile(event.target.files[0], () => {
// console.log('ckckckckckckckckckckk')
// })
// console.log('selectFile', event.target.files[0])
uploadFile(event, (key) => {
console.log(key)
this.newImages.push(key)
console.log(this.newImages)
})
uploadFile.js 文件
import Vue from 'vue'
import SparkMD5 from 'spark-md5'
import { cosConfig } from './config'
import COS from 'cos-js-sdk-v5'
export default function(file,backtopage) {
var key = ''
Vue.prototype.uploadFile = uploadFile
console.log('hhhhhhhhhhhhhhhhhhhhhhhhh')
console.log(cosConfig)
var cos = new COS({
getAuthorization: function (params, callback) {//获取签名 必填参数
// 方法二(适用于前端调试)
var authorization = COS.getAuthorization({
SecretId: cosConfig.SecretId,
SecretKey: cosConfig.SecretKey,
Method: params.Method,
Key: params.Key
});
callback(authorization);
}
});
console.log(cos)
uploadFile(file, backtopage)
// 将上传文件的方法挂载到vue的原型链上面
// Vue.prototype.uploadFile = uploadFile
var requestCallback = function (err, data) {
console.log(err || data);
if (err && err.error) {
console.log(key)
// wx.showModal({ title: '返回错误', content: '请求失败:' + err.error.Message + ';状态码:' + err.statusCode, showCancel: false });
} else if (err) {
console.log(key)
// wx.showModal({ title: '请求出错', content: '请求出错:' + err + ';状态码:' + err.statusCode, showCancel: false });
} else {
console.log(key)
backtopage(key)
// wx.showToast({ title: '上传成功', icon: 'success', duration: 3000 });
}
};
function uploadFile (file, backtopage) {
console.log('nnnnnnnnnnnnnnnnnnn')
console.log(file)
// 得到md5码
getFileMD5(file, md5 => {
console.log(file)
// 存储文件的md5码
file.md5 = md5
console.log(file.md5)
let subfix = file.name.substr(file.name.lastIndexOf('.'))
key = file.md5 + subfix
console.log(key)
cos.headObject({
Bucket: cosConfig.Bucket, /* 必须 */
Region: cosConfig.Region, /* 必须 */
Key: key, /* 必须 */
}, function (err, data) {
if (err != null) {
console.log('wrong')
console.log(err)
cos.putObject({
Bucket: cosConfig.Bucket,
Region: cosConfig.Region,
Key: key,
Body: file,
onProgress: function (info) {
console.log(JSON.stringify(info));
}
}, requestCallback)
} else if (data != null) {
backtopage(key)
}
});
})
}
// 获得文件md5
function getFileMD5(file, callback) {
//声明必要的变量
var fileReader = new FileReader(),
//文件每块分割2M,计算分割详情
chunkSize = 2097152,
chunks = Math.ceil(file.size / chunkSize),
currentChunk = 0,
//创建md5对象(基于SparkMD5)
spark = new SparkMD5()
//每块文件读取完毕之后的处理
fileReader.onload = function(e) {
//每块交由sparkMD5进行计算
spark.appendBinary(e.target.result)
currentChunk++
//如果文件处理完成计算MD5,如果还有分片继续处理
if (currentChunk < chunks) {
loadNext()
} else {
callback(spark.end())
}
}
//处理单片文件的上传
function loadNext() {
var start = currentChunk * chunkSize,
end = start + chunkSize >= file.size ? file.size : start + chunkSize
fileReader.readAsBinaryString(file.slice(start, end))
}
loadNext()
}
}