vue+elementUI调取摄像机/相册的功能

主要是利用elementUI组件实现获取摄像机/相册的功能 （原生的input标签也是可以的，封装好的组件功能比较完善，就使用组件实现了，主要是有点懒！！哈哈哈） html

<template>
  <div class="test">
    <div class="image_list">
      <el-upload
        ref="upload"
        class="upload-demo"
        :action="resultACtion"
        multiple
        capture="camera"
        accept="image/*"
        :data="photoData"
        :before-upload="beforeAvatarUpload"
        :headers="myHeaders"
        :on-error="uploadFail"
        :on-success="handleAvatarSuccess"
        list-type="picture-card"
        :show-file-list="false"
      >
        <i slot="default" class="el-icon-plus" />
      </el-upload>
      <!-- <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog> -->
    </div>
  </div>
</template>

js

<script>
var token = localStorage.getItem(token_key)

export default {
  data() {
    return {
      dialogImageUrl: ,
      // dialogVisible: false,
      myHeaders: { Authorization: token },
      resultACtion: /xx, // 后台定义的接口路径
      photoData: { // 传递的参数
        type: 1
      }
    }
  },
  methods: {
    // 上传文件成功
    handleAvatarSuccess(res, file) {
      this.mode = file.raw
      this.fileName = file.raw.name
      this.$refs.upload.clearFiles()
      this.$message({
        message: 上传成功,
        type: success
      })
    },
    // 上传文件之前
    beforeAvatarUpload(file) {
    // 在这里可以处理传递给后台的参数
      this.$message({
        message: 上传文件,
        type: success
      })
    },
    // 上传错误
    uploadFail(err, file, fileList) {
      console.log(err, 上传错误)
      this.$refs.upload.abort()
      this.$refs.upload.clearFiles()
      this.$message({
        message: 上传错误!!,
        type: error
      })
    }
  }
}
</script>