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

XixunPlayer 下载文件到SD卡（图片、视频等任意文件）

/**
* @Author: 858834013@qq.com
* @Name: DownFile
* @Date: 2022-04-27
* @Desc: 下载文件到SD卡（图片、视频等任意文件）
*/
<template>
  <div class="saveStringFile">
    <el-button class="mb20 ml20" 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-form ref="form" label-width="80px">
          <p>下载文件到SD卡（图片、视频等任意文件）</p>
          <el-form-item label="文件地址">
            <el-input v-model="url" placeholder="请输入下载地址">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="DownFile">下载文件</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getdata } from '@/api/led/led'
import qs from 'qs'
import axios from 'axios'
import dayjs from 'dayjs'
import { getFileName, getSuffix } from '@/utils/utils'

export default {
  name: 'saveStringFile',
  components: {},
  props: {
    id: {
      type: String | Number,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      num: 0,
      dialogVisible: false,
      fileList: [],
      url: ''
    }
  },
  watch: {},
  methods: {
    saveFilePath (name) {
      var that = this
      var data = qs.stringify({
        name: name,
        cardcode: this.id
      })
      axios({
        method: 'POST',
        url: url,
        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)
        }
      })
    },
    DownFile () {
      var that = this
      if (!that.url) {
        this.$message.error('请输入下载地址')
      }
      getdata(that.id,
        {
          type: 'downloadFileToSD',
          url: that.url,
          path: '/' + dayjs().format('YYYYMM') + '/' + getFileName(that.url)//保存后的文件路径，实际绝对路径为							file:///mnt/sdcard/201505/download.html
        }
      ).then(function (res) {
        that.saveFilePath(res.absolutePath)
      })
    },
    getshow () {
      this.dialogVisible = true
    },
  }
}
</script>

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