NUXT.js如何引用第三方NPM包-如：@websanova/vue-upload
2022年4月10日
在使用nuxt.js开发时，涉及到需要使用npmjs.org里面的第三方vue组件库时，需要按如下方式配置，否则无法生效
示例：需要集成@websanova/vue-upload 用于文件上传
步骤一
在项目根目录下的plugins目录下新建一个js文件，文件名可以任意，如：vue-upload.js。代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import Vue from 'vue'; const VueUpload = require('@websanova/vue-upload/dist/v2/vue-upload.esm.js').default export default function ({$axios}) { Vue.use(VueUpload, { plugins: { http: $axios, }, drivers: { http: { call(data) { const source = $axios.CancelToken.source() const url = data.url; const body = data.body; const cancelTokenSource = source; delete data.url; delete data.body; this.plugins.http[data.method || 'post'](url, body, Object.assign({ onUploadProgress: data.progress, cancelToken: cancelTokenSource.token }, data)).then(data.success, data.error); return { abort() { cancelTokenSource.cancel(); } }; } } }, options: {} }) } |
将组件需要注册的逻辑代码都放在此处。其中$axios是nuxt已经集成好的组件，可以通过入参直接获取。
步骤二
在nxut.config.js当中的plugins选项当中添加上面新建的那个js文件，并设置ssr:false
|
1 2 3 |
plugins: [ {src:'~/plugins/vue-websanova-upload',ssr:false}, ], |
使用
经过上面两个步骤后就可以像普通vue组件一样使用了。在vue文件当中可以通过this.$upload方法去调用。注意，如果是在create生命周期内调用时需要增加process.client判断
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
export default { name: 'Index', components:{ Header,Footer }, data() { return { uploader:null } }, created() { if (process.client) { this.$upload.on('uploader', { url: '/ue/yinziai-web/public/uploadOneFile', onSelect:(files,res)=>{ console.log('onSelect'); console.log(files); }, onProgress(file, res) { console.log('onProgress'); console.log(file); console.log(res); }, onSuccess: (file, res) => { console.log('onSuccess'); console.log(file); console.log(res); // On success we can update whatever we need // to locally, for instance the user avatar. this.file = res.data.data; }, onError: (file, res) => { console.log('onError'); console.log(file); console.log(res); if(file.error){ alert(file.error.msg) } }, onEnd(files, res) { console.log('onEnd'); } }) } }, beforeDestroy() { this.$upload.off("uploader") }, methods: { uploadFile() { console.log("点击上传") this.$upload.select("uploader"); } } } |
About The Author
