当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue + elementUi + upLoadIamge组件 上传文件到阿里云oss

vue + elementUi + upLoadIamge组件 上传文件到阿里云oss

2019年01月15日  | 移动技术网IT编程  | 我要评论 
<template>
  <div class="uploadiamge">
      <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlepicturecardpreview"
      :on-remove="handleremove"
      :http-request="myload"
      >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogvisible">
      <img width="100%" :src="dialogimageurl" alt="">
    </el-dialog>
  </div>
</template>
<script>
let axios = require('axios')
export default {
  name: 'uploadiamge',
  data () {
    return {
      dialogimageurl: '',
      dialogvisible: false
    }
  },
  methods: {
    handleremove (file, filelist) {
      console.log(file, filelist)
    },
    handlepicturecardpreview (file) {
      this.dialogimageurl = file.url
      this.dialogvisible = true
    },
    // 自定义上传的方式 作者：曾经的水哥 https://www.cnblogs.com/cengjingdeshuige/
    myload (param) {
      let file = param.file // 得到文件的内容
      console.log(file)
      let index = file.name.indexof('.')
      let nameend = file.name.substr(index)
      const ossapiurl = '这个是获取oss签名的后台接口地址' // 获取oss签名的地址
      // 获取oss签名
      axios.post(ossapiurl).then((data) => {
        if (data.status == 200 && data.data.code == 0) { //eslint-disable-line
          let json = data.data.data
          let ossurl = json.host
          let namestart = new date().gettime() + '' + math.ceil(math.random() * 100)
          let name = '/' + namestart + nameend
          let geturl = json.host + '/' + json.dir + name // 上传后的文件地址
          let senddata = new formdata() // 上传文件的data参数
          senddata.append('ossaccesskeyid', json.accessid)
          senddata.append('policy', json.policy)
          senddata.append('signature', json.signature)
          senddata.append('keys', json.dir)
          senddata.append('key', json.dir + name)
          senddata.append('success_action_status', 200) // 指定返回的状态码
          senddata.append('type', 'image/jpeg')
          senddata.append('file', file)
          console.log(senddata)
          axios.post(ossurl, senddata).then(() => {
            console.log('得到上传到阿里云的图片地址：  ' + geturl)
          })
        }
      })
    }
  },
  mounted () {

  }
}

</script>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网