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!