VUE axios uploads the image to Qiniu instance code

I have used two methods to upload images to the server:

1. Convert the local image to base64 and then send it to the server through a normal post request.

Simple operation, suitable for small pictures, and if you want to be compatible with lower versions of ie, you can't use this method

2. Submit through form.

The form form submission image will refresh the page, and it can also be bound to a hidden iframe when the form is bound to a refresh-free submission data. However, if you want to transfer multiple form data, you need to write a lot of doms and also write an iframe, which is too troublesome.

The cleanest way at the moment is to send form data to the background through axios post request.

As for interface optimization, you can set the opacity of the input file to 0 and click on its parent container to trigger the file

Axios' post request, send the form data part, so that form data can be submitted to the background without refresh

update(e){
     let file = [0];      
     let param = new FormData(); //Create form object     ('file',file,);//Add data to form objects through append     ('chunk','0');//Add other data in the form form     (('file')); //FormData private class object cannot be accessed, you can use get to determine whether the value is transmitted in     let config = {
      headers:{'Content-Type':'multipart/form-data'}
     }; //Add a request header     ('/',param,config)
     .then(response=>{
      ();
     })    
}

The following section is an extension

Under the vue development environment, upload pictures to Qiniu

I recently started the project of appointment with a talented person and needed to upload pictures to Qiniu, but I felt that it was just a simple upload of pictures and needed to attract Qiniu's js. It was too troublesome, so I kept everything simple. Implementation logic: get the Qiniu token returned in the background, then axios' post request, and send form data to Qiniu.

Qiniu's token is encapsulated by its platform, and can be obtained directly by configuring it on its own server. You can find the code that can be used directly on its official website. After obtaining it on Qiniu platform, just return it to the front desk and get it directly.

The following is to upload the picture directly to Qiniu. There is no need to install Qiniu messy js, you just need to upload it through Qiniu's form form.

 update(e){
     let file = [0];
     let d = new Date();
     let type = ('.');
     let tokenParem = {
       'putPolicy':'{\"name\":\"$(fname)\",\"size\":\"$(fsize)\",\"w\":\"$()\",\"h\":\"$()\",\"hash\":\"$(etag)\"}',
       'key':'orderReview/'+()+'/'+(()+1)+'/'+()+'/'+()+'.'+type[-1],
       'bucket':,//Qi Niu's address, this is configured by you yourself (variable)     };
     let param = new FormData(); //Create form object     ('chunk','0');//Breakpoint transmission     ('chunks','1');
     ('file',file,)
     (('file')); //FormData private class object cannot be accessed, you can use get to determine whether the value is transmitted in     let config = {
      headers:{'Content-Type':'multipart/form-data'}
     };
    //Get the token from your server first     (,(tokenParem))
      .then(response=>{
         = ;
        ('token',);
        if(>8){
          alert('No more than 9 pictures');
          return;
        }
        (param,config,);//Then upload the parameters to Qiniu        return;
      })
   },
   uploading(param,config,pathName){
    ('/',param,config)
     .then(response=>{
      ();
      let localArr = ((val,index,arr)=>{
       return arr[index].localSrc;
      })
      if(!~(pathName)){
       ({'src':+,'localSrc':pathName});
      }else{
        alert('This image has been uploaded');
      }
     })
   },    

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.