1. 程式人生 > >vue+axios OSS上傳阿里雲

vue+axios OSS上傳阿里雲

Vue上傳檔案到阿里雲總結:

html:

<input type="file" @change="upload"/>

js:

  import axios from 'axios';
  import OSS from 'ali-oss';


  upload(e){
        var _self = this;
        console.log(e.currentTarget.files[0]);
        var urlStr = _self.upLoadAvatarOss(e);
        console.log(urlStr);
      },
      async upLoadAvatarOss(e) {
        var file = e.currentTarget.files[0];
        var reader = new FileReader();
        reader.readAsArrayBuffer(file);
        return new Promise((resolve, reject) => {
          reader.onload = function (event) {
            const client = new OSS({
              region: '',
              accessKeyId: '',
              accessKeySecret: '',
              bucket: ''
            });
            const obj =new Date().getTime(); //時間戳
            const key = file.name.split('.').join(obj+'.');  //  路徑+時間戳+字尾名
            var buffer = new OSS.Buffer(event.target.result);
            async function put() {
              try {
                let result = await client.put(key, buffer);
                console.log(result);
                let httpUrl = 'url/' + key;
                resolve(httpUrl)
              } catch (e) {
                reject(e);
                console.log(e);
              }
            }
            return put()
          }
        })
      },