vue 2.0直传文件至阿里云oss

背景：后端大佬：小x，之前的上传接口不用了，你研究下直接从网页上传附件到阿里云技术方案吧

---

WTF? 啥？啥？啥？

既然之，则安之，那么我就只能够看看文档了.........
官网url：https://www.aliyun.com/produc...

文档读起来貌似有点...........头痛欲裂？？？

1. 安装 ali-oss

   npm install ali-oss
   

2. 在相应的组件内引入

   const OSS = require('ali-oss').Wrapper

3. oss基本配置

   var client = new OSS({

      region: '购买的区域',                    
      endpoint: '购买的区域',
      accessKeyId: '你的accessKeyId',          
      accessKeySecret: '你的accessKeySecret',   
      bucket: '你的bucket',

   })

4. 发送请求

   可以更改上传的方式：put multipart

   multipart上传方式的：

   • 需要支持断点上传
   • 上传超过100MB大小的文件
   • 网络条件较差，和OSS服务器之间的链接经常断开
   • 需要流式地上传文件
   • 上传文件之前，无法确定上传文件的大小

   client.put(name, file, {
          progress: function*(percentage, cpt) {
              vthis.percentage = percentage   //上传的进度
          }
      }).then((results) => {
         cosnole.log('success')
      }).catch((err) => {
          console.log(err)
      })
  }

 5.上传组件源码

<template>
    <div class="upload">
        <div class="oss_file">
            <span class="img_style"> <i class=" ivu-icon ivu-icon-camera" style="font-size:16px;"></i></span>
            <input type="file" style="height:58px;" :id="id" @change="toUpload" placeholder=""/>
        </div>
        <div>
            <span>{{uploadFilesName}}</span>
        </div>
    </div>
</template>
<script>
    //引入
    const OSS = require('ali-oss').Wrapper
    export default {
        name: "upload",
        props: ['fileList','imageMax'],
        data() {
            return {
                region: 'oss-cn-shenzhen',     //根据你买的那个区的做相应的更改
                bucket: 'boyintest',
                id: 'uploadImage',
                percentage: 0,
                url: '',
                uploadFilesName: '',
                uploadfile: [],
                maxLength: 1

            };
        },
        methods: {
            toUpload() {
                const vthis = this
                const urls = [];
                //oss 基本配置
                var client = new OSS({
                    region: '你的购买区域',
                    endpoint: '你的购买区域',
                    accessKeyId: '你的accessKeyId',
                    accessKeySecret: '你的accessKeySecret',
                    bucket: '你的bucket',
                })
                //进度
                this.percentage = 0;
                //获取文件信息
                const files = document.getElementById(this.id)
                if (files.files) {
                    const fileLen = document.getElementById(this.id).files
                    const file = document.getElementById(this.id).files[0]
                    let consat = file.name;
//限制上传的文件为图片
                    if (consat.indexOf(".png") > -1 || consat.indexOf(".jpeg") > -1 || consat.indexOf(".jpg") > -1  || consat.indexOf(".gif") > -1){}
                    else {
                        this.$Notice.warning({
                            title: "图片格式不正确",
                            desc: "图片" + file.name + " 格式不正确，请上传对应的格式。"
                        });
                        return false;
                    }
                    //限制上传文件的个数
                    const check = this.uploadfile.length < this.maxLength;
                    if (!check) {
                        this.$Notice.warning({
                            title: '最多只能上传'+vthis.maxLength+'张图片。'
                        });
                        return false;
                    }
                    let name = fileLen[0].name
                    for (let i = 0; i < fileLen.length; i++) {
                        const file = fileLen[i]
                        client.put(name, file, {
                            progress: function*(percentage, cpt) {
                                vthis.percentage = percentage
                            }
                        }).then((results) => {
                            this.uploadfile.push({
                                url: results.res.requestUrls[0],
                                fileUrl: results.res.requestUrls[0],
                                name: results.name,
                            })
                            this.$Message.success("上传成功");
                        }).catch((err) => {
                            console.log(err)
                        })
                    }
                }
                //将
                this.$emit('getUploadData',this.uploadfile)
            },
        },
        created() {
            this.maxLength = this.imageMax
        },
    };
</script>

<style scope>
    .upload{
        height: 58px;
        width: 58px;
        display: inline-block;
    }
    .oss_file{
        position: relative;
        display: inline-block;
        overflow: hidden;
        height: 58px;
        width: 58px;
    }
    .oss_file input {
        position: absolute;
        left: 0px;
        top: 0px;
        opacity: 0;
        -ms-filter: 'alpha(opacity=0)';
    }
    .img_style{
        display: inline-block;
        width: 58px;
        height: 58px;
        border: 1px dashed gainsboro;
        line-height: 58px;
        text-align: center;
        cursor: pointer;
    }
</style>