Home > Article > Web Front-end > Detailed explanation of vue Alibaba Cloud upload component
This article mainly introduces how to use web direct transmission to upload Alibaba Cloud OSS images in the Vue project. By default, readers have a certain understanding of the Vue framework and Alibaba Cloud OSS. The overall process is to load the Alibaba Cloud SDK -> Initialize upload Client client -> Wait for file selection -> File selection for upload -> Distribute upload results
I encountered the following pitfalls during use:
You can add script tags directly in the html
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>
In the component, I have packaged an asynchronous method to obtain the sdk, LoadJS. If you are interested, you can take a look
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)
Related recommendations:
A brief discussion on the core architecture design of the upload component
php Multiple file upload component_PHP tutorial
How to use JS upload component FileUpload custom template_javascript skills
The above is the detailed content of Detailed explanation of vue Alibaba Cloud upload component. For more information, please follow other related articles on the PHP Chinese website!