web端直传阿里云Vue

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_38023551/article/details/88947494

一、使用ali-oss进行直传

Jdk地址
官方文档
由于安全性不建议使用此方法

1.设置跨域

参考官方文档
https://www.alibabacloud.com/help/zh/doc-detail/32069.htm?spm=a2c63.p38356.b99.394.492b5738ZBBcex
注意切记:
在这里插入图片描述
否则报错404

2.代码奉上

<template>
    <div>阿里云直传
        <Button @click="init">初始化</Button>
        <!-- <Button @click="init" type="primary">选择图片</Button> -->
        <Button @click="uploadFile" type="info">上传图片</Button>
        <input type="file" id="id1"  @change="selectFile"/>
    </div>
</template>
<script>
import OSS from 'ali-oss'
export default {
  name: 'ossUpload',
  data () {
    return {
      options: {
        region: 'oss-cn-hangzhou',
        accessKeyId: 'k6PF7LTAIrhYPful',
        accessKeySecret: '2gsnYwUMvjpAyDM87iLOVlwMF1OYox',//暴露出来安全性不好
        bucket: 'caitou-develop'
      },
      client: null,
      files: null
    }
  },
  methods: {
    uploadFile () {
      this.client
        .multipartUpload('图片', this.files, {
          progress: (percentage, checkpoint, res) => {
            console.log(percentage, checkpoint, res)
          },
          meta: {
            'Content-Type': 'application/json'
          }
        })
        .then(result => {
          console.log('result', result)
        })
        .catch(err => {
          console.log('err', err)
          console.log('err.name : ' + err.name)
          console.log('err.message : ' + err.message)
        })
    },
    selectFile (e) {
      const files = e.srcElement.files || e.target.files
      this.files = files[0]
      console.log(files[0])
    },
    init () {
      this.client = new OSS({ // 这里是设置图片预览地址
        ...this.options
      })
      console.log(this.client)
    }
  },
  activated () {
    this.$nextTick(() => {
      this.init()
    })
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  }
}
</script>

二、使用后台签名进行直传

阿里云官方帮助文档
记得前端从步骤 2:配置客户端看就可以。
在这里插入图片描述
下载客户端源码:http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/attach/86983/APP_zh/1537971352825/aliyun-oss-appserver-js-master.zip

需要后台支持的参数

  var new_multipart_params = {
          key: obj['dir'],//在阿里云的文件目录
          policy: obj['policy'],//协议
          OSSAccessKeyId: obj['accessid'],
          success_action_status: '200', //让服务端返回200,不然,默认会返回204
          callback: obj['callback'],//回调,可不传
          signature: obj['signature'],//签名
        };

demo上使用的upload.js进行的封装;仔细看了一下代码发现没有必要使用upload.js;由于自己使用的是iviewUI组件,所以就使用iviewUpload的组件。
iview的upload官方文档说明

代码

<template>
  <div>
    阿里云直传
    <br />
    <Divider>iview版</Divider>
    <Upload
      ref="upload"
      :before-upload="handleBeforeUpload"
      :on-progress="handleProgress"
      :on-success="handleSuccess"
      :on-error="handleError"
      :data='data'
      :action="host"
      :show-upload-list='loadingStatus'
    >
      <Button icon="ios-cloud-upload-outline">选择文件进行上传</Button>
    </Upload>
    <div v-if="files !== null">
      文件列表: {{ files.name }}
      <Button type="primary" @click="upload" :loading="loadingStatus">{{
        loadingStatus ? "上传中..." : "上传图片"
      }}</Button>
    </div>
  </div>
</template>
<script>
import { getSignaturek } from '../../../api/tool/tool.js'
export default {
  name: 'ossUpload',
  components: {
   
  },
  data () {
    return {
      host: '', //上传的地址
      data: {},//组件所需要的额外的参数
      loadingStatus: false,
      files: null
    }
  },
  methods: {
    // 上传之前的操作
    handleBeforeUpload (file) {
      this.files = file
      this.ossuploadFile()
      return false
    },
    // 上传中
    handleProgress (event, file, fileList) {
      // console.log(event, file, fileList)
    },
    // 上传成功
    handleSuccess (res, file, fileList) {
      console.log(res, file)
      // console.log(res)
      if (file.status === 'finished') {
        this.loadingStatus = false
        this.$Message.success('上传成功')
        this.files = null
      }
    },
    // 上传失败
    handleError (err, file, fileList) {
      console.log(err, file, fileList)
    },
    // 点击上传
    upload () {
      // 注意这里
      /*
      * @desc 这里是使用的手动上传,需要再一次调用组件内部方法实现上传功能。参数是所选择的文件
      */
      this.$refs.upload.post(this.files)
      this.loadingStatus = true
    },
    // 获取上传所需要的参数
    ossuploadFile () {
      const payload = {
        customName: '测试',
        fileName: this.files.name
      }
      //从后端获取签名的函数
      getSignaturek(payload).then(res => {
        console.log(res)
        if (res.state === 1) {
          const obj = res.data
          this.host = obj.host
          this.data = {
            key: obj['dir'],
            policy: obj['policy'],
            OSSAccessKeyId: obj['accessid'],
            success_action_status: '200', // 让服务端返回200,不然,默认会返回204
            // callback: callbackbody,
            signature: obj['signature']
          }
          this.$Message.success('请在5分钟内完成上传!!!')
        }
      })
    },
  }
}
</script>

展开阅读全文

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