<template><view><view class="img"><view><progress :percent="percent" stroke-width="10"></progress></view><view><button type="primary" :loading="loading" :disabled="disabled"@click="upload(0)">选择照片(请选择png、jpg、gif)</button><img :src="img_src" alt=""></view></view><view class="video"><button type="primary" @tap="upload(1)">选择视频(请选择mp4格式)</button><video :src="src"></video></view><view class="mp3"><button type="primary" @tap="upload(2)">选择音乐(请选择mp3格式)</button><audio :src="audio_src" controls :name="name" author="暂无" :poster='poster'>不支持</audio></view></view></template><script>import jsmediatags from '@/static/jsmediatags.min.js';var _self;export default {data() {return {src: '',img_src: '/static/kong.jpg',audio_src: 'http://tp6.com/upload/634658bfccff2.mp3',name: '纯音乐',poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',percent: 0,loading: false,disabled: false}},methods: {upload: function(e) {// this.audio_img();return;_self = this;if (e == 0) {this.chooseImages()}if (e == 1) {this.chooseVideo()}if (e == 2) {this.chooseFile()}},chooseImages() {uni.chooseImage({count: 1,sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有sourceType: ['album'], //从相册选择success: function(res) {const tempFilePaths = res.tempFilePaths;const uploadTask = uni.uploadFile({url: 'http://tp6.com/index.php',filePath: tempFilePaths[0],name: 'file',formData: {'user': 'test1'},success: function(uploadFileRes) {console.log(uploadFileRes.data);_self.img_src = uploadFileRes.data;}});uploadTask.onProgressUpdate(function(res) {_self.percent = res.progress;console.log('上传进度' + res.progress);console.log('已经上传的数据长度' + res.totalBytesSent);console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);});},error: function(e) {console.log(e);}});},chooseVideo() {uni.chooseVideo({count: 1,maxDuration: 60,sourceType: ['camera', 'album'],success: function(res) {const tempFilePaths = res.tempFilePath;const uploadTask = uni.uploadFile({url: 'http://tp6.com/index.php',filePath: tempFilePaths,name: 'file',formData: {'user': 'test2'},success: function(uploadFileRes) {console.log(uploadFileRes.data);_self.src = uploadFileRes.data;}});uploadTask.onProgressUpdate(function(res) {// console.log(res);// _self.src = res.progress;console.log('上传进度' + res.progress);console.log('已经上传的数据长度' + res.totalBytesSent);console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);});},error: function(e) {console.log(e);}});},chooseFile() {uni.chooseFile({count: 1,type: 'mp3',maxDuration: 60,sourceType: ['camera', 'album'],success: function(res) {// console.log(res.tempFiles[0]);return;_self.audio_img(res.tempFiles[0]); //设置音乐播放器封面const tempFilePaths = res.tempFiles[0].path;_self.name = res.tempFiles[0]['name'].substring(0, res.tempFiles[0]['name'].lastIndexOf("."))const uploadTask = uni.uploadFile({url: 'http://tp6.com/index.php',filePath: tempFilePaths,name: 'file',formData: {'user': 'test2'},success: function(uploadFileRes) {console.log(uploadFileRes.data);_self.audio_src = uploadFileRes.data;}});uploadTask.onProgressUpdate(function(res) {// _self.src = res.progress;console.log('上传进度' + res.progress);console.log('已经上传的数据长度' + res.totalBytesSent);console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);});},error: function(e) {console.log(e);}});},audio_img(file) {jsmediatags.read(file, {onSuccess: function(tag) {console.log(tag);var picture = tag.tags.picture; // create reference to track artvar base64String = "";for (var i = 0; i < picture.data.length; i++) {base64String += String.fromCharCode(picture.data[i]);}var imageUri = "data:" + picture.format + ";base64," + window.btoa(base64String);_self.poster = imageUri;// console.log(imageUri);// use ajax to upload tag info, or create some new form elements},onError: function(error) {console.log(error);}});return;}},onLoad: function() {}}</script><style>img {width: 300rpx;height: 300rpx;}</style>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号