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).then((res) => {
         cosnole.log(res)
      }).catch((err) => {
          console.log(err)
      })
  }

 5.上传组件源码

<template>
    <div>
        <div>
            <input type="file" id="uploadImage" @change="toUpload" placeholder=""/>
        </div>
        <div>
            <span>{{uploadFilesName}}</span>
        </div>
    </div>
</template>
<script>
    //引入oss
    const OSS = require('ali-oss').Wrapper
    export default {
        name: "upload",
        props: ['fileList','imageMax'],
        data() {
            return {
                uploadFilesName: '',
                uploadfile: [],
                maxLength: 1     //限制上传个数

            };
        },
        methods: {
            toUpload() {
                const urls = [];
                //oss 基本配置
                var client = new OSS({
                    region: '你的购买区域',
                    endpoint: '你的购买区域',
                    accessKeyId: '你的accessKeyId',
                    accessKeySecret: '你的accessKeySecret',
                    bucket: '你的bucket',
                })
                //获取文件信息
                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;
                    
                    //限制上传文件的个数
                    const check = this.uploadfile.length < this.maxLength;
                    if (!check) {
                        this.$Notice.warning({
                            title: '最多只能上传'+this.maxLength+'张图片。'
                        });
                        return false;
                    }
                    let name = fileLen[0].name
                    for (let i = 0; i < fileLen.length; i++) {
                        const file = fileLen[i]
                        client.put(name, file).then((res) => {
                            this.uploadfile.push({
                                url: res.res.requestUrls[0],
                                fileUrl: res.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>