记录
虽然说不是第一次接触Vuejs,但是吧之前也只是打过包而已。
反正我是有点懵。
这个是依赖了ali-oss这个module进行oss文件下载运行,随便找篇百度的帖子搭建一个简单的vuejs工程,然后把我这个方案一的代码放到main.js里面,然后敲命令
搭建vuejs工程:https://www.jianshu.com/p/02b12c600c7b
ali-oss依赖下载oss文件: https://www.cnblogs.com/zoo-x/articles/11778010.html
ali后台参考下并配置下: https://help.aliyun.com/knowledge_detail/39518.html?spm=a2c4g.11186623.2.25.46edc4516qVyeW
反正就是多百度,多看阿里的API,要是不行就找售后提工单。
cnpm install
cnpm run dev
访问http://localhost:8080/
即可
方案一
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import OSS from 'ali-oss'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
/**
* 配置信息
*/
const region = 'oss-cn-xxxxxxxxxxxx' // 换成自己的region
const accessKeyId = 'xxxxxxxxxxxxxxxxx' // 换成自己的accessKeyId
const accessKeySecret = 'xxxxxxxxxxxxxxxxxxxxxxxxx' // 换成自己的accessKeySecret
const bucket = 'xxxxxxxxx' // 换成自己的bucket名称
// import { Message } from 'element-ui';
let client = new OSS({
region: region,
accessKeyId: accessKeyId,
accessKeySecret: accessKeySecret,
bucket: bucket
})
/**
*
* @param {上传是设置文件key , 一般为文件名称} objectKey
* @param {文件file} file
// 上传
const CooOss = function (file) {
if (this instanceof CooOss) {
let objectKey = file.lastModified + '_' + file.name ;
return new Promise((resolve,reject) => {
client.multipartUpload(objectKey, file).then(result => {
resolve({
code: 0,
objectKey: objectKey,
url: this.getOssFileUrl(objectKey),
msg: 'ok'
});
}).catch(err => {
console.log('上传出错了');
reject({code : -1 , url : "", objectKey : "", msg : "上传出错了"});
});
})
}else{
return new CooOss(file);
}
};
*/
// 下载
const downloadFile = function (key) {
console.log(key)
let url = client.signatureUrl(key)
let Img = new Image()
let dataURL = ''
let fileName = key.substring(key.indexOf('_') + 1)
Img.src = url
Img.setAttribute('crossOrigin', 'Anonymous')
Img.onload = function () {
let canvas = document.createElement('canvas')
let width = Img.width
let height = Img.height
canvas.width = width
canvas.height = height
canvas.getContext('2d').drawImage(Img, 0, 0, width, height)
dataURL = canvas.toDataURL('image/png')
let eleLink = document.createElement('a')
eleLink.download = fileName
eleLink.style.display = 'none'
eleLink.href = dataURL
document.body.appendChild(eleLink)
eleLink.click()
document.body.removeChild(eleLink)
}
}
downloadFile('201912111621536609会员卡效果图.jpg')
/**
*
* @param {上传是设置文件key 一般是文件名} obecjtKey
CooOss.prototype.getOssFileUrl = obecjtKey => {
if(!obecjtKey) return new Error("object key 必须传");
return "https://" + bucket + "." + region + ".aliyuncs.com/" + obecjtKey;
}
export default {
install(Vue){
Vue.prototype.Oss = {
uploadFile : CooOss,
downloadFile : downloadFile
};
}
};
*/
方案二
我自认为也不叫方案二吧,额,好吧总得给个名分。
就是如果要在oss下载文件,但是吧又不通过ali-oss包的话,因为david说他,觉得前端包太大了如果加了ali-oss的话,唉毕竟是老大,不敢反驳,瑟瑟发抖。好吧那就不用ali-oss进行下载oss文件。
然后就又换了种方法。
用javaScript,额这个网上一大堆啊。我也是百度的。
参考:
https://www.cnblogs.com/xtjatswc/p/11345584.html
https://blog.csdn.net/qq_34233080/article/details/90635235
对了需要在程序当中访问,也就是localhost:8080/这种访问,清下缓存。
售后工程师 2020-03-12 11:36:22
您好,这个跨域的配置是可以的,您客户端情况下浏览器缓存后,不要直接访问这个URL,直接通过程序访问测试下是否正常,避免客户端缓存的情况
差不多了,讲完了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script>
/**
* 获取页面文件名
* @param url 文件url 8020-8079
*/
function downloadUrlFile(url) {
console.log("downloadFile=====");
url= url.replace(/\\/g, '/');
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
xhr.setRequestHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST, HEAD, PUT, DELETE');
xhr.setRequestHeader('Access-Control-Allow-Headers', 'Content-Type');
xhr.onload = () => {
if (xhr.status === 200) {
// 获取文件blob数据并保存
var fileName = getFileName(url);
saveAs(xhr.response, fileName);
}
};
xhr.send();
}
/**
* URL方式保存文件到本地
* @param data 文件的blob数据
* @param name 文件名
*/
function saveAs(data, name) {
var urlObject = window.URL || window.webkitURL || window;
var export_blob = new Blob([data]);
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
save_link.href = urlObject.createObjectURL(export_blob);
save_link.download = name;
save_link.click();
}
/**
* 根据文件url获取文件名
* @param url 文件url
*/
function getFileName(url)
{
var num = url.lastIndexOf('/')+1
var fileName = url.substring(num)
//把参数和文件名分割开
fileName = decodeURI(fileName.split("?")[0]);
return fileName;
}
downloadUrlFile("http:// [bucket name] .oss-cn- [region] .aliyuncs.com/202003031140425717批注 2020-02-20 150155.png");
</script>
</html>