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>