Demand:
The project involves uploading pictures or videos to Qiniuyun. If you submit binary data to the backstage for uploading, the experiment experience is not very good, the file is small or good, and the whole process of a large file will be very slow. So you need to upload the front-end directly to Qiniu, and then submit the resource key of Qiniu to the back-end. The back-end only needs to provide the upload token of Qiniu.
Step 1: Get the Seven Bull token
This step directly finds the back-end personnel to interface with, and he will return a very long upload token.
Step 2: Front-end code implementation
-
Introduce qiniu.min.js. I use the cdn of Qiniu directly here.
<script src="http://jssdk-v2.demo.qiniu.io/dist/qiniu.min.js"></script> - The complete upload code for the front end is as follows
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="file" name="image" id="file"> <input type="button" id="upload" value="upload"> </body> <script src="js/jquery.min.js"></script> <script src="http://jssdk-v2.demo.qiniu.io/dist/qiniu.min.js"></script> <script> // Seven cattle token var qiniuToken = 'RmRBqO9olxxPJ3dNKaq-9YxOqS46vZj-AMTGc-o2:ENiL_XazSwOFYClV20BjTmr_M5E=:eyJzY29wZ7I6InlvdWfYW9pdCIsImRlYWRsaW5lIjoxNTY3NzczMDMxfQ==' $("#upload").click(function(){ var obj = $("#file"); // Get the absolute path of the file locally C:fakepathcover.jpg var fileName = obj.val(); // Get the file suffix name. jpg var suffix = fileName.substring(fileName.lastIndexOf("."),fileName.length) // Get the file object var file = obj.get(0).files[0] // Get file size unit KB var size = (file.size / 1024).toFixed(2) // Setting up the uploaded Qiniu key to upload successfully requires that this value be submitted to the background. var qiniuKey = "user/image/20190906/" + suffix // Upload files to Qiniu var observer = { //The result parameter of the listening function in the upload process has the object of the total field, which contains three attributes: loaded, total and percent. next(result){ // Implementing upload progress bar ___________. console.log(result) }, //Upload failed callback error(err){ console.log(err.message) }, // Upload complete callback complete(res){ // Submit data to back-end colleagues and other business logic... console.log(res) } }; var putExtra = { //original file name fname: "", //Used to place custom variables params: {}, //Limit upload file type mimeType: null }; var config = { //Storage area (z0: stands for East China; z2: stands for Southern China, and does not write default automatic identification). region:qiniu.region.z2, //Concurrent Request Quantity for Piecewise Upload concurrentRequestLimit:2 }; var observable = qiniu.upload(file,qiniuKey,qiniuToken,putExtra,config); // Upload start var subscription = observable.subscribe(observer); // Cancel upload // subscription.unsubscribe(); }) </script> </html>