精华内容
下载资源
问答
  • oss上传文件

    2019-08-31 11:13:28
    message: "上传文件大小不能超过 30MB!", type: "warning" }); } }, /* 上传成功 */ handleSuccess(res, file) { if(res){ this.percent=100; this.fileFlag = true; } this.successUpLoad = false; ...

     html代码

    <el-input
                        type="paperTitle"
                        placeholder="填写真实标题,不超过50字"
                        v-model="paperTitle"
                        maxlength="50"
                        show-word-limit
                      >
    </el-input>
    
    <el-progress
                      v-show="fileFlag == true"
                      :text-inside="true"
                      :color="customColors"
                      :percentage="percent"
                      style="margin-top: 20px"
                    >
    </el-progress>

    js代码

    data:{
        fileFlag: false, //是否显示进度条
        percent: 0, //上传文件百分比
    }
    /* 上传之前 */
        beforeAvatarUpload(file) {
          const isLt2M = file.size / 1024 / 1024 < 30;
          if (!isLt2M) {
            this.$message({
              message: "上传文件大小不能超过 30MB!",
              type: "warning"
            });
          }  
        },
        /* 上传成功 */
        handleSuccess(res, file) {
    
         if(res){
           this.percent=100;
           this.fileFlag = true;
         }
          this.successUpLoad = false; 
        },
    
     OSSinit(file) {
          console.log(file)
          this.file=file.file
          var client = new OSS.Wrapper({
            region: "oss-cn-beijing",
            accessKeyId: "LTAI4FoiwSU57x6WxLBToiZr",
            accessKeySecret: "hJ5GlRzHu0sQ1NHMyLzUrSgnrIIumB",
            bucket: "cnkijc"
          });
          var flieInfo = this.file.name.split(".");
          var storeAs = "upload/" + timestamp() +"."+ flieInfo[1];
          var that = this
          client
            .multipartUpload(storeAs, this.file, {
              progress: async function(p) {
                //p进度条的值
                console.log(p);
                that.fileFlag = true;
                that.percent = Math.floor(p * 100);
              }
            })
            .then(function(result) {
              if(result.res.status==200){
                console.log('http://cnkijc.oss-cn-beijing.aliyuncs.com/'+result.name)
                alert('上传成功')
              }
    
            })
            .catch(function(err) {
              console.log(err);
            });
    
    
          function timestamp() {
            var time = new Date();
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            var h = time.getHours();
            var mm = time.getMinutes();
            var s = time.getSeconds();
            var ms = time.getMilliseconds();
            console.log(y);
            return (
              "" + y + add0(m) + add0(d) + add0(h) + add0(mm) + add0(s) + add0(ms)
            );
          }
        

    注:progress函数一定要加上async,不然会报错

    展开全文
  • dubbo上传文件+oss上传文件服务
  • OSS上传文件工具类

    2018-05-26 09:33:48
    OSS上传文件工具类 可上传任何文件 通过自定后缀名实现
  • Vue Element UI + OSS上传文件

    万次阅读 热门讨论 2018-08-06 23:08:04
      Element UI提供了upload上传组件,可以到官网查看upload组件的详细介绍;查看upload组件的上传源码upload/ajax,使用的XHR对象上传文件,在项目实践中,发现该...本文主要讲解的是OSS上传文件的前端,Browser....

      Element提供了upload上传组件,可以查看官网upload组件的详细介绍;查看upload组件的上传源码upload/ajax,使用的是XHR对象上传文件。在项目实践中,发现该上传方法上传大文件时会出现问题,所以决定使用阿里云对象存储服务(Object Storage Service,简称OSS),OSS详细介绍可以查看官网,本文主要讲解的是OSS上传文件的前端,后台开发请查看官网介绍,SDK Browser.js讲解了前端如何进行上传。

    1、使用npm安装SDK的开发包:

    npm install ali-oss
    

    2、OSS配置

    let OSS = require('ali-oss');
    let client= new OSS.Wrapper({
      accessKeyId: 'your access key',
      accessKeySecret: 'your access secret',
      bucket: 'your bucket name',
      region: 'oss-cn-hangzhou'
    });
    

    最新版的没有了Wrapper构造函数,直接配置

    let oss = require('ali-oss');
    var client = oss({
      accessKeyId: 'your access key',
      accessKeySecret: 'your access secret',
      bucket: 'your bucket name',
      region: 'oss-cn-hangzhou'
    });
    

    3、上传文件
      OSS上传文件分为上传Buffer内容、上传blob数据、分片上传,此处展示分片上传

    let result = await client.multipartUpload('object-key', 'local-file', {
        progress: async function (p) {
          console.log('Progress: ' + p);
        }
      });
    

      js调用OSS上传文件已经没有问题,但是我们需要实现公用上传组件,Element UI已经实现了Upload上传组件,包括上传进度、异常处理、拖拽等;那我们还有必要重新开发一个像Upload一样的组件吗?通过查看Upload组件的API发现有一个http-request属性,http-request覆盖默认的上传行为,可以自定义上传的实现;看到这个我就省了很多事,直接用OSS上传覆盖XHR上传。代码如下:

    <template>
      <div>
        <el-upload
          :auto-upload="false"
          :action="uploadUrl"
          ref="upload"
          :before-upload="fnBeforeUpload"
          :on-success="fnUploadSuccess"
          :on-exceed="fnUploadExceed"
          :data="data_extra"
          :headers="uploadHeaders"
          :http-request="fnUploadRequest"
          drag
          :limit="files"
          :disabled="disabled"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div>
        </el-upload>
      </div>
    </template>
    <script>
    import UploadFileApi from '@/api/system/UploadFileApi'
    import OSS from 'ali-oss'
    export default {
      name: 'fileUpload',
      props: {
        data_extra: {
          type: Object,
          required: true
        },
        accept: {
          type: Array,
          required: true
        }
      },
      data () {
        return {
          uploadUrl: '',
          fileList: [],
          files: 10,
          uploadHeaders: {
            authorization: ''
          },
          disabled: false
        }
      },
      methods: {
        /**
         * @description [fnUploadRequest 覆盖默认的上传行为,实现自定义上传]
         * @author   shanshuizinong
         * @param    {object}   option [上传选项]
         * @return   {null}   [没有返回]
         */
        async fnUploadRequest (option) {
          try {
            let vm = this
            vm.disabled = true
            // 获取OSS配置信息
            let uploadFileApi = new UploadFileApi()
            let ret = await uploadFileApi.fileOssParams()
            if (!(ret.data && ret.data.code === '0' && ret.data.data)) {
              throw new Error('获取OSS参数失败')
            }
            let ossData = JSON.parse(ret.data.data)
            let relativePath = ossData.relativePath
            let client = new OSS.Wrapper({
              policy: ossData.policy,
              accessKeyId: ossData.accessid,
              accessKeySecret: ossData.accesssecret,
              bucket: ossData.bucket,
              signature: ossData.signature
            })
            let file = option.file
            const point = file.name.lastIndexOf('.')
            let suffix = file.name.substr(point)
            let fileName = file.name.substr(0, point)
            let date = vm.$moment().format('YYYYMMDDHHmm')
            let fileNames = `${fileName}_${date}${suffix}`
            // 分片上传文件
            ret = await client.multipartUpload(relativePath + fileNames, file, {
              progress: async function (p) {
                let e = {}
                e.percent = p * 100
                option.onProgress(e)
              }
            })
            console.log(ret)
            if (ret.res.statusCode === 200) {
              // option.onSuccess(ret)
              return ret
            } else {
              vm.disabled = false
              option.onError('上传失败')
            }
          } catch (error) {
            console.error(error)
            this.disabled = false
            option.onError('上传失败')
            this.$error(error.message)
          }
        },
        /**
         * @description [fnUploadSuccess 文件上传成功的函数]
         * @author   shanshuizinong
         * @return   {null}  [没有返回]
         */
        async fnUploadSuccess () {
          // TODO
        }
      }
    }
    </script>
    
    

      查看upload源码upload.vue知道httpRequest会有一个文件上传的option选项作为参数,upload/ajax源码中上传进度、上传成功、上传失败都是通过option调用其方法进行触发。

    展开全文
  • 微信小程序oss上传文件引用js 包括Signature及policy生成方法
  • Ant Design 使用Upload组件默认方式上传图片到阿里云OSS 背景 近来做了一个管理后台,采用的AntDesignPro脚手架,...今天要谈论的是使用Upload默认方式上传OSS,为啥要用默认的方式上传呢? No reason ! Why not .
    1. 搬运链接:https://juejin.cn/post/6844903929164070926

    Ant Design 使用Upload组件默认方式上传图片到阿里云OSS

    背景

    近来做了一个管理后台,采用的AntDesignPro脚手架,阿里版的React全家桶,包含Ant Design组件库,Dva状态管理,权限模块,国际化,主题定制等等称成熟的解决方案,当然这不是今天要将的重点。

    今天要谈论的是使用Upload默认方式上传到OSS,为啥要用默认的方式上传呢?

    No reason ! Why not !!

    !!!! 现在官方已经更新相关示例和api,建议参考官方示例:

    ant.design/components/…

    正文

    直接上代码,试试代码自解释:

    import CryptoJS from 'crypto-js';
    import Base64 from 'base-64';
    
    const uploadButton = (
       <div>
         <Icon type={payImgLoading ? 'loading' : 'plus'} />
         <div className="ant-upload-text">Upload</div>
       </div>
     );
    
    
    <Upload
      action="http://xxxx.oss-cn-shanghai.aliyuncs.com"
      accept="image/*"
      listType="picture-card"
      className="avatar-uploader"
      showUploadList={false}
      beforeUpload={this.beforeUpload}
      onChange={this.handleChange}
      data={{
        key: todayKey + "/${filename}",
        policy: policyBase64,
        OSSAccessKeyId: accessKeyId,
        success_action_status: 200,
        signature,
      }}
    >
      {
         payImgUrl ? 
         <img 
            src={imgUrl} 
            alt="avatar" 
            style={{ width: '100%' }} 
         /> : 
         uploadButton
    
      }
    </Upload>
    

    以上代码重点关注Upload组件的action属性和data属性,一个是图片上传接口地址,当然可以直接是 OSS 对象存储地址; 而核心在data属性上:

    • key: 文件路径采用:日期文件夹 + 文件名

    需要注意的是后面的 “/${filename}”,这里不是反引号,整体是字符串,filename是形参,不能填入真实文件名;

    • policy: policyBase64
    <code class="copyable" lang="bash">const policyText = {
      "expiration": "2028-01-01T12:00:00.000Z", // 设置该Policy的失效时间
      "conditions": [
        ["content-length-range", 0, 1048576000] // 设置上传文件的大小限制
      ]
    };
    const policyBase64 = Base64.encode(JSON.stringify(policyText))
    
    
    *   OSSAccessKeyId: 阿里云OSS keyid
    *   success_action_status:200
    *   signature: 建议采用后台签名,下面是前端签名方法,accessSecret是阿里云OSS秘钥
    
    <code class="copyable" lang="bash">const bytes = CryptoJS.HmacSHA1(policyBase64, accessSecret, { asBytes: true });
    const signature = bytes.toString(CryptoJS.enc.Base64); 
    
    

    上面使用到两个加密库

    import CryptoJS from 'crypto-js';// "base-64": "^0.1.0"
    import Base64 from 'base-64';//  "crypto-js": "^3.1.9-1"
    

    今天这个编辑器老是自动滚动,不啰嗦了,在配置中遇到问题请留言吧…

    福利,附上完整代码

    /* eslint-disable no-template-curly-in-string */
    import React, { PureComponent, Fragment } from 'react';
    import { connect } from 'dva';
    import moment from 'moment';
    import CryptoJS from 'crypto-js';
    import Base64 from 'base-64';
    import {
      Card, Form, Input, Divider, Icon, Upload, message, Button,
      Table, Modal, InputNumber, Select, Popconfirm
    } from 'antd';
    
    const todayKey = moment().format('YYYYMMDD');
    const host = "http://xxxx.oss-cn-shanghai.aliyuncs.com";
    const accessKeyId = "xxxxx";
    const accessSecret = "xxxxxx";
    const policyText = {
      "expiration": "2028-01-01T12:00:00.000Z", // 设置该Policy的失效时间,
      "conditions": [
        ["content-length-range", 0, 1048576000] // 设置上传文件的大小限制
      ]
    };
    const policyBase64 = Base64.encode(JSON.stringify(policyText))
    const bytes = CryptoJS.HmacSHA1(policyBase64, accessSecret, { asBytes: true });
    const signature = bytes.toString(CryptoJS.enc.Base64); 
    
    @Form.create()
    @connect(({loading, usermanage }) => ({
      userList: usermanage.userList,
      loading: loading.models.usermanage,
    }))
    class TableList extends PureComponent {
    
      state = {
        payImgLoading: false,
        payImgUrl: ''
      };
    
      beforeUpload = (file) => {
        // 检查图片类型
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isBMP = file.type === 'image/bmp';
        const isGIF = file.type === 'image/gif';
        const isWEBP = file.type === 'image/webp';
        const isPic = isJPG || isPNG || isBMP || isGIF || isWEBP;
        if (!isPic) {
          message.error('请上传图片');
          return;
        }
        const isLt5M = file.size / 1024 / 1024 < 5;
        if (!isLt5M) {
          message.error('上传图片必须小于 5MB!');
          return;
        }
        return isPic&&isLt5M;
      }
    
      handleChange = ({ file }) => {
        if (file.status === 'uploading') {
          this.setState({ payImgLoading: true });
          return;
        }
        if (file.status === 'done') {
          this.setState({
            payImgUrl: `${host}/${todayKey}/${file.name}`,
            payImgLoading: false,
          });
        }
      }
    
      render() {
    
        const uploadButton = (
          <div>
            <Icon type={payImgLoading ? 'loading' : 'plus'} />
            <div className="ant-upload-text">Upload</div>
          </div>
        );
    
        return (
            <Upload
               action={host}
               accept="image/*"
               listType="picture-card"
               className="avatar-uploader"
               showUploadList={false}
               beforeUpload={this.beforeUpload}
               onChange={this.handleChange}
               data={{
                 key: todayKey + "/${filename}",
                 policy: policyBase64,
                 OSSAccessKeyId: accessKeyId,
                 success_action_status: 200,
                 signature,
               }}
            >
               {
                   payImgUrl ? 
                   <img src={payImgUrl} alt="avatar" style={{ width: '100%' }} /> :
                   uploadButton   
               }
            </Upload>    
        );
      }
    }
    
    1. oss直传
    展开全文
  • 阿里云oss上传文件以及图片.rar.rar
  • 主要介绍了React实现阿里云OSS上传文件的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 阿里云OSS上传文件

    2020-11-19 22:44:00
    阿里云OSS上传文件代码模板 //获取阿里云存储相关常量 String endPoint = ConstantPropertiesUtil.END_POINT; String accessKeyId = ConstantPropertiesUtil.ACCESS_KEY_ID; String accessKeySecret = ...

    阿里云OSS上传文件代码模板

     public String uploadFileAvatar(MultipartFile file) {
            //获取阿里云存储相关常量
            String endPoint = ConstantPropertiesUtil.END_POINT;
            String accessKeyId = ConstantPropertiesUtil.ACCESS_KEY_ID;
            String accessKeySecret = ConstantPropertiesUtil.ACCESS_KEY_SECRET;
            String bucketName = ConstantPropertiesUtil.BUCKET_NAME;
            try {
                //创建OSS实例
                OSS ossClient = new OSSClientBuilder().build(endPoint, accessKeyId, accessKeySecret);
                //获取上传文件输入流
                InputStream inputStream = file.getInputStream();
                //获取文件名称
                String fileName = file.getOriginalFilename();
                //多次上传相同名称文件,造成最后一次上传把之前文件覆盖
                //在文件名称里面添加随机唯一的值
                String uuid = UUID.randomUUID().toString().replaceAll("-", "");
                fileName = uuid + fileName;
                //把文件安装日期进行分类
                //获取当前日期,导入依赖
                String datePath = new DateTime().toString("yyyy/MM/dd");
                //拼接
                fileName = datePath + "/" + fileName;
                //调用oss方法实现上传
                //第一个参数 Bucket名称
                //第二个参数 上传道oss文件路径和文件名称
                //第三个参数 上传文件输入流
                ossClient.putObject(bucketName,fileName,inputStream);
                //关闭OSSClient
                ossClient.shutdown();
                //把上传之后文件路径返回
                //需要把上传道阿里云oss路径手动拼接出来
                String url = "https://"+bucketName+"."+endPoint+"/"+fileName;
                return url;
            } catch (IOException e) {
                e.printStackTrace();
                return null;
            }
        }

    工具类

    @Component
    public class ConstantPropertiesUtil implements InitializingBean {
    
        @Value("${aliyun.oss.file.endpoint}")
        private String endpoint;
    
        @Value("${aliyun.oss.file.keyid}")
        private String keyId;
    
        @Value("${aliyun.oss.file.keysecret}")
        private String keySecret;
    
        @Value("${aliyun.oss.file.bucketname}")
        private String bucketName;
    
        public static String END_POINT;
        public static String ACCESS_KEY_ID;
        public static String ACCESS_KEY_SECRET;
        public static String BUCKET_NAME;
    
        @Override
        public void afterPropertiesSet() throws Exception {
            END_POINT = endpoint;
            ACCESS_KEY_ID = keyId;
            ACCESS_KEY_SECRET = keySecret;
            BUCKET_NAME = bucketName;
        }
    }
    

    上传结果

    展开全文
  • oss上传文件0字节

    2018-12-30 21:18:00
    最近使用oss上传文件,不同项目中使用的版本也不同,之前的都能正常上传,最近因需要添加ObjectMetaData属性,扩展了一个方法,发现上传的文件始终是0字节的,最终跟源码发现conntentLength为0,之前其他的方法的...
  • oss上传文件以及jar包

    2017-08-18 09:16:43
    使用oss技术上传文件
  • 阿里云OSS上传文件本地调试跨域问题解决
  • 使用阿里云oss上传文件带进度条显示 Controller层 @ApiOperation(value = "上传文件带进度条") @PostMapping(value = "uplodeProgressBar") public R uplodeProgressBar(@RequestParam(value = "file") ...
  • elementUI 阿里云oss 上传文件纯前端 <el-form-item label="选择文件" prop="imgUrl" style="height: 130px"> <el-upload class="upload-demo" ref="upload" :on-exceed="onExceed" :on-change=...
  • oss上传文件失败

    2020-12-26 04:08:57
    <div><p>`com.alibaba.sdk.android.oss.ClientException: Expected a quoted string (position:DOCDECL :50 in java.io.InputStreamReader) org.xmlpull.v1....aliyun/aliyun-oss-android-sdk</p></div>
  • Android端使用阿里云OSS上传文件的正确姿势
  • 刚学习了使用python向al的oss上传文件,简单上传,简单下载,和大家分享下 import os import yaml import oss2 import sys import tempfile #从yml文件中获取配置 def getyml(): # 获取当前文件路径 filePath = ...
  • 阿里云OSS 上传文件、直接下载 1. 安装OSS SDK composer require aliyuncs/oss-sdk-php 2. thinkPHP接口 public function uploadFile(){ if (is_file(__DIR__ . '/../autoload.php')) { require_once __DIR__ . '...
  • 阿里云OSS上传文件工具类

    千次阅读 2017-02-24 10:05:24
     * 阿里云OSS上传文件工具  *  * 支持普通文件上传,限制大小文件上传,限制大小图片上传  *  * @version1.0  */ public class AliyunOssUtil { private Logger logger = LoggerFactory.getLogger(Aliyun...
  • 阿里云OSS上传文件时,如何显示上传网速 业务场景 用户上传时,网速很慢,或者在上传大文件时,虽然有进度条,但是动的很慢,或者不明显,用户会产生困惑. 所以就产生了一个显示网速的需求点. 实现方式 Electron 因为我们的...
  • java web中下载文件时,我们一般设置Content-Disposition告诉浏览器下载文件的名称,是否在浏览器中内嵌显示. Content-disposition: ...使用阿里云oss上传文件时如何设置对应的中文下载名称 上传文件时设置请求头Co.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,685
精华内容 1,474
关键字:

oss上传文件