vue+axios OSS上传阿里云

最新推荐文章于 2024-03-05 10:25:59 发布

原创

最新推荐文章于 2024-03-05 10:25:59 发布 · 2.4k 阅读

4 ·

CC 4.0 BY-SA版权

本文总结了使用Vue.js结合Axios库将文件上传到阿里云对象存储服务（OSS）的过程，涵盖了HTML表单设置和JavaScript处理逻辑。

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+'.');  //  路径+时间戳+后缀名