-
plugins/uploadFile/index.jsimport Vue from 'vue'; import UploadTool from '@/components/uploadTool'; let uploadFileInstance = null; let init = () => { let uploadFileConstructor = Vue.extend(UploadTool); // 構(gòu)造函數(shù)可以傳參太雨，data撼港，method uploadFileInstance = new uploadFileConstructor({}); uploadFileInstance.$mount(); document.body.appendChild(uploadFileInstance.$el); } let caller = (options) => { if(!uploadFileInstance) { init(options); } // uploadTool.vue 中使用getParams接收調(diào)用時傳入的參數(shù)。 type: image等 uploadFileInstance.getParams(options); } export default { install(Vue) { Vue.prototype.$uploadTool = caller; } } -
/components/uploadTool.vue<template> <div> <input type="file" ref="input" hidden multiple @change="onFileChange($event)" accept="*" /> </div> </template> <script> export default { name: "UploadTool", components: {}, componentName: "UploadTool", data() { return { callBack: null, // Function. Return data when upload success } }, methods: { getParams(options) { this.callBack = options.callBack; this.chooseFile(); }, chooseFile() { this.$refs.input.click(); }, onFileChange(e) { if(e.target.files.length) { // you can deal with files here, like filter type, size... this.uploadFileToOss(); } }, uploadFileToOss() { // upload file to Oss here // when success, get file data from oss this.callBack(data); } } } </script>
-
XXX.vue 中使用
// 使用 startChooseFile() { this.$uploadTool({ msg: "upload", // uploadTool can get "upload" from options.msg callBack: (data) => { // get file info here // ... } }) }
