As for the el-upload of element-UI, in fact, there are quite a few mentions in the issue. Many first-time users may not get the point of happy use, and most of them will be filtered or closed by the robot directly due to standard problems after the issue is raised. For example, the last related issue sought to address the use of HTTP-Request, but was also closed due to specification issues. So let’s do a little bit more down-to-earth business class sharing.

What do we want?

This problem is simple: first, we need a good-looking skin bag! That leaves Vue pretty much out of the question, and Element-UI’s El-Upload fits the bill. Second, we need an interesting soul, we are using seven cow object store, but our idea is to want to use qiniu-JS this official SDK. Since el-Upload opened up the customization of the request method, we changed it.

1. What do we do?

qiniu-js SDK

Just read the documentation.

In fact, why use the SDK directly instead of the request method that comes with the component? Here I have two explanations: stability and laziness. What seven Cows put out is definitely more suitable for their own services, so it may be wrong to arrange action or data, so it is better to do it directly according to the way they give. For example, sharding, if I just use it from a usage point of view, I don’t have to worry about how to split it, how to upload it, how to combine it into a file. All I have to do is ask the back end to do the upload strategy and release a token, and then I don’t have to do anything else. As for the browser, since we use it with Vue, webpack has taken care of the trivia for us and we don’t have to worry about it.

Well, I’ll skip installation and import and just see how methods are called. Upload is an observer. Register a method through qiniu.upload to subscribe to upload and unsubscribe to unupload. And the observer will split up three methods: Next, Error, and complete, which simply means process, error, and completion. This section can be written directly from the document:

const observable = qiniu.upload(file, key, token, putExtra, config)
const subscription = observable.subscribe(next, error, complete) // Upload started

// subscription. Unsubscribe () This method cancels operations
Copy the code

The next method receives a parameter containing various upload progress information:

const next = ({ total }) = > {
  // 
  const {
    loaded, // Uploaded size, in bytes.
    total,  // Total control information uploaded this time, in bytes
    percent // The current upload progress ranges from 0 to 100
  } = total
};
Copy the code

So if you don’t have any special requirements, percent will capture progress.

Complete takes a parameter, and when the upload is complete, the server returns you what it is configured to display, depending on how its backend is configured.

Error, as the name implies, is when the upload error occurs when the processing, the processing of the error is also different from person to person, just look at the document.

So let’s save it for now and look at el-upload

el-upload

My suggestion is to take a peek at the El-Upload source code so it’s easy to see how nice skins and interesting souls work together when a file is dragged in or added to a component. If you just want to understand how uploads work, just look at two files with Ajax in them: one is ajax.js and the other is upload.vue

If you say: I don’t want to see the source code! And then want to be able to write with your request method combined, can! A silly way to do this is to define a method that takes a parameter and binds it directly to the upload http-Request:

{
  template: `<el-upload :http-request="request" />`
  methods: {
    request(obj) { console.log(obj) }
  }
}
Copy the code

At this point you can see all the requests that El-Upload has packaged, and you can design a soul based on this beautiful skin. (There is an issue about header and data, which are actually included in this)

But I do recommend looking at the source code, because if you look at the source code you’ll find some details you can use later, such as lines 133 to 143 in upload.vue:

onProgress: e= > {
  this.onProgress(e, rawFile);
},
onSuccess: res= > {
  this.onSuccess(res, rawFile);
  delete this.reqs[uid];
},
onError: err= > {
  this.onError(err, rawFile);
  delete this.reqs[uid];
}
Copy the code

And that’s when you’ll know: Oh! I’ll be able to use the progress bar in this capsule to show success and failure processing. You don’t need to introduce more components or more callbacks yourself. Even if seven cows are not used as a request method in the future, the component can be reused without modification. So #8291 is a bit of a shame, hopefully this article will help him if he hasn’t figured it out yet.

3. merge

After figuring them out, it’s about “rubbing them up.” We already know what information el-Upload can use, and the rest of the business operations can be moved to Element’s official documentation. Let’s make a soul, but before we do that, a note: Our team is very focused on standardizing and embracing the classes + TypeScript approach, but the person who wrote this article prefers JavaScript, and more people need it.

// upload.js

// the token is sent to the back end. Obj refers to the object received from the el-upload
export const upload = token= > obj => {
  const { file } = obj 

  // If the key is undefined or null, the uploaded hash will be used as the key.
  const key = "" 
  
  // It varies from person to person
  const putExtra = {},
        config   = {} 

  const observable = qiniu.upload(file, key, token, putExtra, config)

  // The information you just got is ready to use, so you can use the progress bar of el-upload
  const next = ({ total }) = > obj.onProgress({ percent: total.percent })

  const error = err= > obj.onError(err)

  const complete = res= > obj.onSuccess(res)

  const subscription = observable.subscribe(next, error, complete)
  return subscription // return to cancel the upload operation
}
Copy the code
Vue.component('upload', {
  template: `<el-upload :http-request="request" />`
  methods: {
    request(obj) {
      // I don't care how you get the token!
      const uploader = upload(token)
      const subscription = uploader(obj) 
    }
  }
})
Copy the code

It’s a primer, and that’s about it. Love and customization will do the rest!