使用vue开发实现XixunPlayer的功能.

XixunPlayer 实现文件上传

/**
* @Author: 858834013@qq.com
* @Name: saveStringFile
* @Date: 2022-04-26
* @Desc: XixunPlayer 实现文件上传
*/
<template>
  <div class="saveStringFile">
    <el-button class="mb20" type="primary" @click="getshow" size="mini">上传文件到内部存储或SD卡</el-button>
    <el-dialog
      title="上传文件到内部存储或SD卡"
      :visible.sync="dialogVisible"
      append-to-body
      width="90%">
      <div class="list">
        <el-upload
          class="upload-demo"
          ref="upload"
          :on-change="handlePreview"
          :file-list="fileList"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getdata } from '@/api/led/led'
import qs from 'qs'
import axios from 'axios'

export default {
  name: 'saveStringFile',
  components: {},
  props: {
    id: {
      type: String | Number,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      num: 0,
      dialogVisible: false,
      fileList: []
    }
  },
  watch: {},
  methods: {
    submitUpload () {
      this.$refs.upload.submit()
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file, fileList) {
      this.getBase64(file.raw).then(res => {
        console.log(file.raw.name)
        console.log(res)
        this.saveStringFile(res, file.raw.name)
      })
    },
    saveFilePath (name) {
      var that = this
      var data = qs.stringify({
        name: name,
        cardcode: this.id
      })
      axios({
        method: 'POST',
        url: 'http://27.128.168.5:66/WebService.asmx/addProgram',
        data: data,
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(function (res) {
        if (res.data == '新增节目成功') {
          that.$message({
            message: res.data,
            type: 'success'
          })
          that.dialogVisible = false
          that.$emit('getdata', 0)
        } else {
          that.$message.error(res.data)
        }
      })
    },
    saveStringFile (data, name) {
      var that = this
      getdata(that.id,
        {
          type: 'saveStringFile',
          fileName: name,
          content: data,
          base64: true
        }
      ).then(function (res) {
        that.saveFilePath(name)
      })
    },
    getBase64 (file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function () {
          imgResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          resolve(imgResult)
        }
      })
    },
    getshow () {
      this.dialogVisible = true
    },
  }
}
</script>

<style lang="scss" scoped>
.saveStringFile {
  display: inline-block;
}
</style>
<style>
input[type="file"] {
  display: none !important;
}
</style>