阿里oss上传图片react组件alioss-react，vue组件alioss-vue （不用我先收藏着，后端看下前端处理方法）...

 

1、介绍

 

　　最近开发了一个项目，其中需要一个上传图片到阿里云的 oss 上面，就是上传图片到阿里云的 oss 上面。

　　因为之前开发过 vue 的阿里云 oss 上传，所以直接复制粘 vue 的组件。

　　因为我做的是 react 的项目，所以需要稍微修改。

　　介于以后会经常用到，所以决定将它封装成组件，并且添加到 npm 包里面。

 

　　xl_alioss_vue  :  这个是 vue 的 NPM 包

　　xl_alioss_react : 这个是 react 的 NPM 包

 

2、项目的安装和预览

 

　　xl_alioss_vue 的安装和应用

 

　　安装：

yarn add xl_alioss_vue

　　

　　使用：

<template>
    <FileUpload url="http://127.0.0.1:8081/common/upload/alioss/vue"
                v-on:upLoadImgEnd="upLoadImgEnd"
                v-on:upload="upload" >
      <img v-if="imgUrl" :src="imgUrl" alt="">
      <p v-if="!imgUrl">点击上传</p>
    </FileUpload>
</template>
<script>
　// 引入 xl_alioss_vue
  import FileUpload from 'xl_alioss_vue'
  export default {
    components: {
      FileUpload
    },
    data() {
      return {
        imgUrl:''
      }
    },
    methods:{
      upLoadImgEnd(data){
        this.imgUrl = data
      },
      upload(data,file,startLoad){
        upload(Object.assign({},data,{file}))
      }
    },
    created() {

    },
  }
</script>

　　

　　这里可以看到 xl_alioss_vue 插件有三个属性：

•  url ：这个url 是请求一些 alioss 认证的信息的。（ 由开发后端提供，后面将alioss 时候，介绍下 ）　

• upLoadImgEnd(data)  上传结束后函数，data 为返回的图片 url

• upload (data,file,startLoad)   这里如果没有的这个属性的话，会直接上传，不需要startLoad

  • data : 是后端返回的 alioss 的认证信息

  • file :  上传文件

  • startLoad ： 开始上传函数

 

　　这里是上传时候数据结构。

　　所有在这里添加了一个数据处理的函数 upload 进行中转，就是为了把数据处理为一下格式

 

data = {
  accessid,
  policy,
  signature,
  dir,
  file,
}