vue接触

最新推荐文章于 2023-05-13 21:52:33 发布

Fengshana

最新推荐文章于 2023-05-13 21:52:33 发布

阅读量68

点赞数

分类专栏：项目

本文链接：https://blog.csdn.net/qq_43409111/article/details/115199267

版权

项目专栏收录该内容

39 篇文章 0 订阅

订阅专栏

记录

虽然说不是第一次接触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>

Fengshana

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue接触

记录虽然说不是第一次接触Vuejs,但是吧之前也只是打过包而已。反正我是有点懵。这个是依赖了ali-oss这个module进行oss文件下载运行，随便找篇百度的帖子搭建一个简单的vuejs工程，然后把我这个方案一的代码放到main.js里面，然后敲命令搭建vuejs工程：https://www.jianshu.com/p/02b12c600c7bali-oss依赖下载oss文件: https://www.cnblogs.com/zoo-x/articles/11778010.htmlali后台参
复制链接

扫一扫

专栏目录