@femessage/upload-to-ali 上传图片

效果图

1.安装 
yarn add @femessage/upload-to-ali
2.组件配置信息
/*Prop name	Type	Default	Required	Description
v-model	string|array	Required	
true
图片地址, 支持v-model
accept	string	image	
接受上传的文件类型, 多个值逗号分隔, 默认只接受图片 其他文件类型可以参考MIME 类型列表

action	string	process.env.UPLOAD_ACTION	
上传地址

beforeUpload	func		
upload前的钩子函数，传入选择的文件，FileList类型。 要求返回一个promise，resolved则继续upload，rejected则停止上传。 调用时机在size和accept检验之前。

bucket	string	process.env.OSS_BUCKET	
存储空间的名字

compressOptions	object	{ maxWidth: 750 }	
图片压缩参数，请参考：https://www.npmjs.com/package/compressorjs#options

customDomain	string	process.env.OSS_CUSTOM_DOMAIN	
自定义域名, 该字段有值时, 返回的文件url拼接规则为: customDomain + / + dir + filename 域名无协议时, url默认以 // 开头 域名不需要/结尾

dir	string	process.env.OSS_DIR || '	
目录名, 一定要/结尾

disabled	boolean	false	
是否禁用。若为true，则不能上传

max	number	9	
允许上传的最大数量

multiple	boolean	false	
是否多选

onClick	func		
点击事件, 返回参数为当前点击的url

onOversize	func		
所选文件超出size限制时的处理函数； 接收超出大小的文件作为参数

preview	boolean	true	
是否开启预览功能，需要全局注册 img-preview 组件

region	string	process.env.OSS_REGION	
根据 存储空间 所在的存储区域, 相应的上传域名

request	func		
自定义上传, 使用此函数则会覆盖默认的上传行为和全局上传行为 返回 Promise, 接收 resolve 参数为 url

size	number	1024	
上传文件大小限制, 单位为KB, 默认值为1024, 参考GitHub上传头像设置

https://github.com/settings/profile

timeout	number	0	
暂不支持此props。超时时间, 单位毫秒, 大于0才生效

tip	string	''	
自定义上传提示内容

uploadOptions	object	{ partSize: 100 * oneKB }	
上传参数，请参考：https://help.aliyun.com/document_detail/64047.html?spm=a2c4g.11186623.2.25.40d279f8OV4hwk#h2-url-2

Method name	Parameters	Description
selectFiles()		
手动触发选择文件事件

Event name	Type	Description
input	undefined	
delete	undefined	
删除图片事件

Arguments
url: string — 被删除图片的url；index: number — 被删除图片的下标
loading	undefined	
上传过程中

Arguments
name: string — 当前上传的图片名称
fail	undefined	
上传失败

Arguments
error: Error — 上传失败或压缩失败抛出的 error 对象。当压缩失败时，error.message === 'compress-fail'
loaded	undefined	
上传完成后触发的事件。

Arguments
urls: string[]|string — multiple模式返回此次成功上传的文件url数组； 单张模式返回上传的url
Slot	Description
default	
自定义上传区域，会覆盖 slot=spinner、slot=placeholder

spinner	
自定义loading内容，默认类似 element-ui 的 v-loading

placeholder	
自定义placeholder内容 */
3.代码演示
<template>
  <div>
     <UploadToAli 
		v-model="url" :request="requestx"
		accept="image/png,image/jpg,image/jpeg"
		:size="1024*1024*15" :max="15" 
		:multiple="true" :preview="true"
	/>
  </div>
</template>
<script>
//注册组件
import UploadToAli from '@femessage/upload-to-ali'
//上传图片请求接口
import { fecthFileUploadUrl } from '@/services/fileUpload'
export default {
  components:{UploadToAli},
  data(){
    return{
      url:[]
    }
  },
  methods:{
    loaded(file) {
      console.log(file) // url地址
    },
    //上传
    async requestx(file) {
      let apiServer = process.env.API_SERVER
      const devEnv = !!apiServer
        ? new RegExp(/dev|test|uat/gi).exec(apiServer)
        : null
      const env = new RegExp(/dev|test|uat/gi).exec(location.origin)
      const isDev =
        location.origin.indexOf('localhost') > -1 ||
        location.origin.indexOf('127.') > -1 ||
        location.origin.indexOf('192.') > -1
      const envStr =
        !!isDev && devEnv[0] ? devEnv[0] : env && env[0] ? env[0] : 'prd'
      const param = new FormData()
      param.append('file', file)
      param.append('catalog', `dr-${envStr}/console/file/`)
      //请求 fecthFileUploadUrl
      const data = await fecthFileUploadUrl(param)
      const url = data.data.payload
      //console.log('url', url);
      return Promise.resolve(url)
    },
  }
};
</script>

运行时报这个错，安装 npm i stream 就可以了