关于VUE项目中引入外部js文件的解决方式

问题描述：
由于vue下支持的ES5和ES6语法，所以传统JS文件的引入不能使用原有方式的操作

<script src="js的路径"><</script>

VUE下ES5和ES6下的引入方式如下：

<script>  
    import { 组件别名 } from '../../lib/myscript.js'  
    export default {  
        methods:{ 
　         methods1(){  //该JS文件中的方法
             。。。。。。。。。。。。
           }  
    }}  
</script>

第二种方式引入

新建JS文件示例：

import axios from 'axios'
import { Toast } from 'vant';

function upLoaderImg (uploadUrl,file) {
    let chooseImg = []  //选择的图片数组
    let params = new FormData()
    if(Array.isArray(file)){ //因为该组件单选是对象，多选是数组
        chooseImg = file
    }else{
        chooseImg.push(file)
    }
    chooseImg.map((item)=>{
        params.append('file', item.file)
    })    
    params.append('action', 'upload')
    let config = {
    headers: { //添加请求头
        'Content-Type': 'multipart/form-data'
      }
    }
    return new Promise((resolve, reject) => {
        axios.post(uploadUrl, params, config).then(res => {
            if (res && res.data.status == 0) {    
                Toast.loading({
                    message: '图片上传中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                    onClose: resolve(res.data)
                  });
            } else {
                Toast.fail({
                    message: '图片上传异常',
                    forbidClick: true,
                    onClose: reject(res.data)
                  });
            }
        }).catch(err => {
            Toast.fail({
                message: '服务器异常',
                forbidClick: true,
                onClose: reject(err)
            });
        });
    })
}

export {
    upLoaderImg
}

在需要引入文件的地方使用import

1、全部引入

import * as upImgFun from '@/libs/util.upLoaderImg.js';

2、单个函数引入

import upLoaderImg from '@/libs/util.upLoaderImg.js';

函数的使用：

upLoaderImg(this.webapi("upAppImgs@actionImgData"),file)

注意：vue页面内使用函数的时候前面不要加this关键词