Node.js获取OSS阿里云上传时的签名,前端通过FormData提交实现上传

1、node.js

$router.get('/policy', (req, res) => {
    console.log('<------------------policy----------->')
    var configOSS = {
        dirPath: 'test/', // 存放到哪个目录下
        bucket: 'demo',//bucketName
        host: 'http://demo.oss-cn-beijing.aliyuncs.com',//自己的地址
        accessKeyId: '',//自己的key
        accessKeySecret: '',//自己的KeySecret
        expAfter: 300000, // 签名失效时间,毫秒
        maxSize: 1048576000// 文件最大的 size
    }
    const config = configOSS;
    const expireTime = new Date().getTime() + config.expAfter
    const expiration = new Date(expireTime).toISOString()
    const policyString = JSON.stringify({
        expiration,
        conditions: [
            ['content-length-range', 0, config.maxSize],
            ['starts-with', '$key', config.dirPath]
        ]
    })
    const policy = Buffer.from(policyString).toString('base64')

    const signature = crypto.createHmac('sha1', config.accessKeySecret).update(policy).digest("base64")


    res.json({
        signature,
        policy,
        'host': config.host,
        'OSSAccessKeyId': config.accessKeyId,
        'key': expireTime,
        'success_action_status': 201,
        'dirPath': config.dirPath,
    })

2、vue文件

<el-upload
              ref="uploadFile"
              class="avatar-uploader"
              name="photoPath"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="imgPreview"
              :on-success="handleAvatarSuccess"
            >
              <img
                v-if="photoPath"
                :src="photoPath"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

3、

 imgPreview(file, fileList) {
      const isJPG =
        file.raw.type === 'image/jpeg' ||
        file.raw.type === 'image/png' ||
        file.raw.type === 'image/jpg'
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传影印件图片只能是 JPG或者PNG或者JPEG 格式!')
      } else if (!isLt2M) {
        this.$message.error('上传影印件图片大小不能超过 5MB!')
      } else {
        this.supplier.idPhoto = file.raw //URL.createObjectURL(file.raw);
        this.supplier.photoPath = URL.createObjectURL(file.raw)
//    设置回调callback
       /* let callbackData = await this.$axios.post(
          this.$wwwConfig.authentication,
          { param1: '', param2: file.name }
        )*/
         let res = await this.$axios.get('./policy', {})
         if (res.status == 200) {
        let authenticationData = JSON.parse(res .data.data)
        let param = new FormData() // 创建form对象
        param.append('OSSAccessKeyId', authenticationData.accessid)
        param.append('policy', authenticationData.policy)
        param.append('key', authenticationData.dir)
        param.append('success_action_status', 200)
       // param.append('callback', authenticationData.callback) //base64编码
        param.append('signature', authenticationData.signature)
        param.append('file', file.raw)
        // 添加请求头
        let config = {
          header: {
            'Content-Type': 'multipart/form-data;'
          }
        }
        this.$axios
          .post(authenticationData.host, param, config)
          .then(res => {
            console.log(res)
            if (res.status == 200) {
 
            }
          })
          .catch(function(e) {
            console.log(e)
          })
         }
      }
    }

 

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读