VUE axios uploads an image to qiniu instance code,

VUE axios uploads an image to qiniu instance code,

I have used either of the following methods to upload images to the server:

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

This method is easy to operate and suitable for small images. If you want to be compatible with earlier versions of ie, you cannot use this method.

2. Submit through form.

When the form is submitted, the page is refreshed. You can also bind the form to a hidden iframe, so that you do not need to submit any new data. However, if you want to transmit multiple form data, you need to write a lot of dom and iframe at the same time, which is too troublesome.

Currently, the cleaner method is to send form data to the background through the post request of axios.

For html, you can set the opacity of the input file to 0 and click its parent container to trigger the file.

Copy codeThe Code is as follows:
<Input class = "file" name = "file" type = "file" accept = "image/png, image/gif, image/jpeg" @ change = "update"/>

THE post request of axios sends the form data to the background without refreshing the new form data.

Update (e) {let file = e.tar get. files [0]; let param = new FormData (); // create the form object param. append ('file', file, file. name); // Add data param to the form object through append. append ('chunk', '0'); // Add other data consoles in the form. log (param. get ('file'); // FormData private class object, cannot be accessed. You can use get to determine whether the value is passed in let config = {headers: {'content-type ': 'multipart/form-data'}; // Add the request header this. axios. post ('HTTP: // upload.qiniu.com/', param,config ). then (response => {console. log (response. data );})}

The following sections are extensions

Upload images to qiniu In the vue Development Environment

Recently, I started an appointment project. I need to upload images to qiniu, but I feel that I still need to introduce the js of qiniu to upload images in a simple way. If it is too troublesome, I will keep everything simple. Implementation logic: Obtain the qiniu token returned by the background, and then send the form data to qiniu In the axios post request.

The token of qiniu is encapsulated on its platform. You can find the code that can be directly used on its own server configuration on its official website. After obtaining the code from qiniu platform, just get it at the front-end.

The following is a direct upload of images to qiniu. You do not need to install the js of qiniu. You only need to upload the images through the form of qiniu.

Update (e) {let file = e.tar get. files [0]; let d = new Date (); let type = file. name. split ('. '); let tokenParem = {'putpolicy':' {\ "name \": \ "$ (fname) \", \ "size \": \ "$ (fsize) \ ", \" w \ ": \" $ (imageInfo. width) \ ", \" h \ ": \" $ (imageInfo. height) \ ", \" hash \ ": \" $ (etag) \ "} ', 'key': 'orderreview/' + d. getFullYear () + '/' + (d. getMonth () + 1) + '/' + d. getDate () + '/' + d. valueOf () + '. '+ type [type. length-1], 'bucket': this. domain, // address of qiniu, which is You have configured (variable)}; let param = new FormData (); // create the form object param. append ('chunk', '0'); // breakpoint transmission param. append ('chunk', '1'); param. append ('file', file, file. name) console. log (param. get ('file'); // FormData private class object, cannot be accessed. You can use get to determine whether the value is passed in let config = {headers: {'content-type ': 'multipart/form-data'}; // obtain the token this from your server first. axios. post (api. uploadToken, qs. stringify (tokenParem )). then (response => {this. token = response. Data. uploadToken; param. append ('Token', this. token); if (this. images. length> 8) {alert ('No more than 9'); return;} this. uploading (param, config, file. name); // then upload the parameter to qiniu return;})}, uploading (param, config, pathName) {this. axios. post ('HTTP: // upload.qiniu.com/', param,config ). then (response => {console. log (response. data); let localArr = this. images. map (val, index, arr) => {return arr [index]. localSrc;}) if (! ~ LocalArr. indexOf (pathName) {this. images. push ({'src': this. showUrl + response. data. key, 'localsrc': pathName});} else {alert ('uploaded image ');}})},

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.