前端通过后端签名表单直接上传阿里云oss

最新推荐文章于 2022-10-31 19:00:00 发布

岁月如歌_

最新推荐文章于 2022-10-31 19:00:00 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/namechenfl/article/details/115249347

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  </head>
  <body>
    <div>
      <input
        type="file"
        class="file"
      />
      <!-- accept="image/gif,image/jpeg,image/jpg,image/png" -->

    </div>
  </body>
  <script>
    // getSuffix() 方法用于获取文件名的后缀
    var getSuffix = function (fileName) {
      var pos = fileName.lastIndexOf(".");
      var suffix = "";
      if (pos != -1) {
        suffix = fileName.substring(pos);
      }
      return suffix;
    };
    // getFile() 方法用于获取文件并且上传图片
    function getFile(obj) {
      //获取文件路径
      var file = $("input[type='file']").val();
      //创建一个空对象实例
      var formData = new FormData();
      //获取当前时间戳加上获取的文件后缀 为文件名
      var filename = new Date().getTime() + getSuffix(file);
      //注意formData里append添加的键的大小写
      formData.append("key", obj.dir + filename); //存储在oss的文件路径
      formData.append("OSSAccessKeyId", obj.accessid); //accessKeyId
      formData.append("policy", obj.policy); //policy
      formData.append("Signature", obj.signature); //签名
      formData.append("callback", obj.callback); //签名
      //如果是base64文件，那么直接把base64字符串转成blob对象进行上传就可以了
      formData.append("file", $("input[type='file']")[0].files[0]);
      formData.append("success_action_status", 200); //成功后返回的操作码
      //   var fileUrl = url + "/" + "ceshi/" + filename;
      console.log(1111111111111111111, formData, file, obj);

      var xhrOnProgress = function (fun) {
        xhrOnProgress.onprogress = fun; //绑定监听
        //使用闭包实现监听绑
        return function () {
          //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
          var xhr = $.ajaxSettings.xhr();
          //判断监听函数是否为函数
          if (typeof xhrOnProgress.onprogress !== "function") return xhr;
          //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
          if (xhrOnProgress.onprogress && xhr.upload) {
            xhr.upload.onprogress = xhrOnProgress.onprogress;
          }
          return xhr;
        };
      };
      $.ajax({
        type: "POST",
        data: formData,
        processData: false, //这里默认为true,必须手动改为false
        contentType: false, //这里必须手动改为false,避免出现解析错误
        cache: false, //缓存必须改为false,保证每次都能读取最新数据
        url: obj.host,
        xhr: xhrOnProgress(function (e) {
          var percent = parseInt(e.loaded*100 / e.total); //计算百分比
          console.log(percent)
        }),
        success: function (res) {
          console.log('地址：',obj.host+'/'+ obj.dir + filename)
        },
        error: function (error) {
          console.log(error); //文件上传失败打印错误信息
        },
      });
    }
    //选择上传文件
    $("input[type='file']").change(function () {
      // var obj = {
      //     callback:'',
      //     signature:'',
      //     policy:'',
      //     OSSAccessKeyId:'LTAI4G4URGbMzQVZt2mh267N',
      //     dir:'',
      // }; //接收请求数据
      //   getFile(obj); //执行getFile()函数向阿里云上传文件
      $.ajax({
        url: "https://crmcs.zhongbenruanjian.com/index/oss/get",
        data: {}, //上传文件需要的参数,我这里为相册id,按需更改
        type: "GET",
        success: function (res) {
          console.log(JSON.parse(res));
          var obj = JSON.parse(res); //接收请求数据
          getFile(obj); //执行getFile()函数向阿里云上传文件
        },
      });
    });

    /*
	  如果展示图片需要缩略图可以在图片链接后面加入缩放参数 最简单的为下列方法
	  图片链接 + '?x-oss-process=image/resize,p_' + 缩放参数(参数为1-100);
	  示例缩略图链接如下：
	*/
    // http://1824.img.pp.sohu.com.cn/images/2008/6/5/13/17/11af6fc767c.jpg?x-oss-process=image/resize,p_10  //这里10为原图的十分之一大小
  </script>
</html>

岁月如歌_

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端通过后端签名表单直接上传阿里云oss

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
复制链接

扫一扫