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:

1. This article The Alibaba Cloud SDK in the form of js is used. Using the npm form of the SDK will require some back-end node functions and cannot be used for direct web transmission.

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

2. Use There is an asynchronous problem with the SDK introduced in js, that is, the SDK may not be loaded when the client is initialized. I set a timer in the mouted hook function of Vue, and initialize the client after the SDK is loaded.

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)

3. If your project is in an https environment, you need to ensure that secure is configured as true when initializing the client, otherwise the file cannot be uploaded

4. By default, the name of the saved image will be Take a random string, but uploading the same picture multiple times will save multiple identical pictures. Here I made an optimization, splicing the size, height and width of the picture into a string, and then md5 the string. Hash processing, so that only one image will be saved after uploading it multiple times

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!