In a previous project, I came across a picture uploading preview function and used qiuyun to upload, so I took time to sort it out.

Before uploading files, you need to include these basic functions of preview/detection

H5 You can use the change event to listen for file changes and obtain the latest files objects in real time

Local preview

Get the URl of the local data

There is a createObjectURL method on window.url that parses the above files object and returns a binary SRC code as follows

function createObjectURL(blob) { if (window.URL) { return window.URL.createObjectURL(blob); } else if (window.webkitURL) { return window.webkitURL.createObjectURL(blob); } else { return null; }}Copy the code

File detection

Before uploading, the type and size of files should be detected by obtaining files objects

Function checkFile(files) {const file = files[0]; / / file is empty to determine if the file = = = null | | file = = = undefined) {alert (" please select you want to upload files!" ); return false; } // Let size = math.floor (file.size/1024); If (size > 10000) {alert(" Upload file cannot exceed 10M!" ); return false; }; // Check file type if(file.type.indexof ('image') === -1 && file.type.indexof ('video') === -1) {alert(" please select image file or video file! ); return false; } if(file.type.indexof ('jpeg') === -1 && file.type.indexof ('mp4') === -1){alert(" Images currently support JPG format, video supports MP4 format "); return false; } / / insert the picture or video $(" body "). The innerHTML = file. The indexOf (' image ') = = = 1?" <video src=\""+createObjectURL(file)+"\"/>" :"<img src=\""+createObjectURL(file)+"\"/>" return true; };Copy the code

And then finally we managed the file through seven Cow cloud and we imported that file through the SCtipt tag, and it generated globally an object called Qiniu, and for some reason, Project in 1 x version of the seven cows SDK https://cdnjs.cloudflare.com/ajax/libs/qiniu-js/1.8/qiniu.min.js

Axios.get (baseurl+'/token').then(function(re){const {token,keys} = {re.uptoken,re.save_key}; Const uploader = qiniu.uploader ({runtimes: 'html5,html4', // Uploader: const uploader = qiniu.uploader ({runtimes: 'html5,html4', // Uploader: 'btnSelect', // upload selected click button, ** required ** upToken: token, // uptoken_URL: 'http://192.168.1.110:3000/upload/uptoken_ad', / / Ajax request upToken Url, it is strongly recommended that set * * * * (server) / / upToken: ", // If uptoken_URL is not specified, you must specify uptoken, which is generated by other programs unique_names: false, // Default false, key is the file name. If this option is enabled, the SDK automatically generates the key (file name) after the upload is successful. Save_key: false, // default false. If 'savA_key' is specified in the upload policy that generates the upToken on the server, this function is enabled, and the SDK ignores the processing of the key domain: 'http://cdn.xxxx.com', //bucket domain name, used when downloading resources, ** required ** get_new_upToken: false, // Set whether to obtain a new token container each time when uploading files: // max_file_size: '100MB ', // maximum file size limit flash_swf_url: 'js/plupload/ moxie. SWF ', // Import flash, relative path max_retries: 3, // Maximum retry times for upload failure dragDROP: true, // Enable dragable upload drop_element: Chunk_size: '5MB ', // Size of each slice when uploading in chunks auto_start: Init: {'FilesAdded': Function (up, files) {plupload.each(files, function(file) {console.log(1); }); }, 'BeforeUpload': function(up, file) {console.log(2); }, 'UploadProgress': function(up, file) {console.log(3); }, 'FileUploaded': function(up, file, info) { var domain = up.getOption('domain'); var res = JSON.parse(info); console.log(res); var sourceLink = domain + '/' + res.key; // Obtain the Url console.log(sourceLink) of the uploaded file. }, 'Error': function(up, err, errTip) {console.log(err); console.log(errTip); }, 'UploadComplete': function() {// UploadComplete: function() { Function (up, file) {// If you want to personalize each file key in the front end, you can configure this function. // This configuration must be in unique_names: false, save_key: Var key = keys; // do something with key here return key } } }); })Copy the code