Rumah > hujung hadapan web > tutorial js > vue阿里云上传组件详解

vue阿里云上传组件详解

小云云
Lepaskan: 2018-01-30 17:14:04
asal
2203 orang telah melayarinya

本文主要介绍如何在vue项目中使用web直传方式上传阿里云oss图片,默认读者对vue框架和阿里云oss有一定的了解,整体的流程是加载好阿里云sdk -> 初始化上传客户端client -> 等待文件选择 -> 文件选择进行上传 -> 分发上传结果  

使用过程中我碰到以下的坑:

1. 本文使用的是js引入形式的阿里云sdk,用npm形式的sdk会需要一些后端的node功能,不能用于web直传。

可以直接在html里面加上script标签

<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>
Salin selepas log masuk
组件里我包装了一个异步获取sdk的方法LoadJS,感兴趣的可以看一下

2. 使用js引入形式的sdk会有一个异步的问题,就是client初始化的时候sdk可能还没加载好,我是在vue的mouted钩子函数内设置了一个定时器,当SDK加载的完成之后再来初始化client

let timer = setInterval(() => {
  if (window.OSS) {
    this.init()
    clearInterval(timer)
    timer = null
    this.debug && window.console.log('阿里云oss初始化完成')
  } else {
    this.debug && window.console.log('阿里云oss初始化中...')
  }
}, 500)
Salin selepas log masuk

3. 如果你的项目是https环境下的,需要保证初始化client的时候配置secure为true,不然无法上传文件

4. 在默认情况下,保存的图片名会取一个随机的字符串,但是同一张图片多次上传就会保存多个相同图片,这边我做了一个优化,将图片的大小和高宽拼接成一个字符串,再对这个字符串进行md5 hash化处理,这样同一张图片上传多次也只会保存一张

相关推荐:

浅谈 上传组件 核心架构设计

php 多文件上传组件_PHP教程

JS上传组件FileUpload自定义模板的使用方法_javascript技巧

Atas ialah kandungan terperinci vue阿里云上传组件详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan