Ideas:

The encapsulation of this component is secondary encapsulation borrowed from elementUi’s component Upload component, which, as its name implies, uploads the component

Go to the official website to copy the code and let the project run to see how it works

Custom upload configuration

Key attributes::http-request="upload" action="#"

Note:

Use the custom behavior to override the default upload. Note that once the custom upload behavior is set, all upload operations, such as data processing and subsequent operations after successful upload, need to be implemented by themselves.on-successThe hook function does not continue to fire

As shown in figure:

Attributes in el-upload, and what they do.

Among themon-successThis property returns a callback for the default upload behavior, so if you want to use the custom upload behavior, you don’t need this property, delete it and use it: HTTP-request (custom upload behavior (emphasis))

attributebeforeUploadWhat is it for

attribute:http-requestThe use of

attribute:http-requestThis property is used for custom uploads and should be removed if usedon-success

Global Registration (preparation) :

// Globally register components
// omit other...
import UploadImg from '@/components/UploadImg'

// 1. Define plugins (extend Vue functionality)
const Myplugin = {
install (Vue) {
 // omit other...
 Vue.component()
}
}
Copy the code

Preparation:

  1. Preparations on the cloud server: Apply for cos server, configure the secret key, and set cORS access

2. Preparation at code level:

(1) Download an officially provided cos service operation package (COS-Js-SDK-V5)

(2) Use your own key to instantiate cos

(3) Then do the specific upload function

Storage buckets and their locations:

Location in data is the address of the picture:

After completing these steps, functions will be realized: upload the pictures to Tencent Cloud by using the object storage function registered above, and realize the uploading function according to COS upload API

Tencent cloud document address

Add a progress bar for uploading:

Find this code in the document instance first:

According to the console print, Percent in progressData represents the percentage of the progress bar

When the numbers are ready, goelemenUiFound in theprogressComponent and use it; This component is simple, change:percentageYou can control the percentage effect

So, assign percent *100 to progressData:percentageCan realize the picture load and progress bar synchronization

There is a “this” point problem, because this line of code is not an arrow function when copied, so its “this” point does not refer to the data in my project, so I need to change this function to the arrow function.

That completes the function.

A little tweaking of the progress bar:

Define Boolean values in datashowProgress:falseDefaults to false, then toel-progressComponent bindingsv-show="showProgress"Allowing the progress bar to appear before uploading an action is allowingshowProgress:trueWhen the upload is successful, change it toshowProgress:false

Summary steps:

1. Install cos-Js-SDK-V5 first

2. Instantiate the COS object: use the secret key here

3. Cos.putobject: Use the bucket name, region

4. Complete the upload function, add a progress bar and optimize it (note that the arrow function “this” points to!)