Instance code used by the qiniu plug-in vue, vue bull plug-in instance

Instance code used by the qiniu plug-in vue, vue bull plug-in instance

This article describes how to use the qiniu plug-in vue. I am also learning to share it with you. By the way, I will leave a note, as shown below:

<Template> <div id = "cxUpload" class = "cx-upload"> <button id = "pickfiles" class = "uploadBtn"> upload </button> </div> </template> <script> // import $ from 'jquery '// import ".. /.. /common/plugin/qiniu/moxie "// import ".. /.. /common/plugin/qiniu/plupload. dev "// import ".. /.. /common/plugin/qiniu "import * as tools from '.. /.. /common/js/app. js 'export default {props: {uptokenObj: Object}, methods: {u PLoadQiniu () {// load qiniuSetInter = setInterval () => {if (this. uptokenObj. upToken) {this. initQiniu (); // clear timer clearInterval (qiniuSetInter) ;}}, 1000) }, initQiniu () {// initialize Qiniu let self = this; let uploader = Qiniu. uploader ({runtimes: 'html5, flash, html4', // upload mode, degradation browse_button: 'pickfiles' in turn, // click the button to upload the selected files, ** required ** // The uptoken provides the upload credential directly, and the uptoken_url provides the address for obtaining the upload credential. If you need to customize the uptoken acquisition process You can set uptoken_func uptoken: this. uptokenObj. upToken, // uptoken is the upload credential. get_new_uptoken: false is generated by other programs. // you can specify whether to obtain the downToken Url of A New uptoken every time when uploading a file. // Ajax requests downToken, private space, the JS-SDK will POST the key and domain of the file to this address, the JSON returned by the server must contain the 'url' field, the 'url' value is the unique_names: false, // The default value is false. The key is the file name. If this option is enabled, the JS-SDK automatically generates a key (File Name) save_key: false for each file, // The default is false. If 'Save _ key' is specified in the upload policy for the uptoken generated by the server, the SDK will not process the key at the front end. domain: this. uptokenObj. imgPath, // bucket domain name, used to download resources, such as: 'http: // xxx.bkt.clouddn.com/'** required ** container: 'cxupload', // upload the dom id of the region, the default value is the parent element of browser_button, max_file_size: '6mb', // maximum file size limit: flash_swf_url: 'path/of/plupload/Moxie.swf ', // introduce flash, relative path max_retries: 1, // maximum number of retries of upload failure dragdrop: false, // you can drag the upload drop_element: 'cxupload', // drag the ID of the upload region element, after a file or folder is dragged, chunk_size: '4mb 'can be triggered. // when multipart upload is performed, the size of each chunk_size file is filtered by {// file type, which is limited to the image type mime_types: [{title: "Image files", extensions: "jpg, jpeg, gif, png"}] // prevent_duplicates: false // duplicate files cannot be selected}, auto_start: true, // select a file and upload it automatically. If you need to bind the event to trigger the upload, init: {'filesadded': function (up, files) {plupload. each (files, function (file) {// After the file is added to the queue, process related tasks}) ;}, 'beforeupload': function (up, file) {// process related tasks before each file is uploaded}, 'uploadprogress': function (up, file) {// process related tasks when each file is uploaded }, 'fileuploaded': function (up, file, info) {// after each file is uploaded successfully, process related things // console. log ('info ++ '); // console. log (info); // Where info is the json returned by the server after the file is successfully uploaded, in the form of // {// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98", // "key ": "gogopher.jpg" //} var domain = up. getOption ('domain '); var res = eval (' + info + ')'); // obtain the Url of the uploaded file // var sourceLink = domain + res. key; // var symbolLink = self. uptokenObj. imgPlaceholder + res. key; var linkObject = {"sourceLink": domain + res. key, "symbolLink": self. uptokenObj. imgPlaceholder + res. key} self. $ emit ('get-path', linkObject) ;}, 'error': function (up, err, errTip) {// when an upload Error occurs, handle related tasks // console. log ('failed -------- ');}, 'uploadcomplete': function () {// process related tasks after the queue file is processed}, 'key': function (up, file) {// If You Want to personalize the key of each file on the front end, you can configure this function. // The configuration must be in unique_names: false, save_key: it takes effect only when false. // obtain the current timestamp var timestamp = new Date (). getTime (); var key = "image/cxw/" + timestamp + ". png "; // do something with key here return key }}) ;}, mounted () {this. upLoadQiniu () ;}}</script> <style lang = "scss" scoped>. cx-upload {display: inline-block ;. uploadBtn {width: 64px; height: 30px; color: # 2f363c; outline: none; border: 2px solid # 2f363c; }}@ media screen and (max-width: 648px) {. cx-upload {float: left ;}</style>

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