|
|
@@ -0,0 +1,443 @@
|
|
|
+<template>
|
|
|
+ <div class="file-upload-container">
|
|
|
+ <div class="header">
|
|
|
+ <h2>文件上传</h2>
|
|
|
+ <p>选择文件后提交给小程序</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="upload-area" @click="triggerFileInput">
|
|
|
+ <div class="upload-icon">
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ </div>
|
|
|
+ <div class="upload-text">
|
|
|
+ <p>点击选择文件</p>
|
|
|
+ <p class="upload-hint">支持图片、文档、视频等格式</p>
|
|
|
+ </div>
|
|
|
+ <input
|
|
|
+ ref="fileInput"
|
|
|
+ type="file"
|
|
|
+ multiple
|
|
|
+ accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.mp4,.mp3"
|
|
|
+ @change="handleFileSelect"
|
|
|
+ style="display: none"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="selectedFiles.length > 0" class="file-list">
|
|
|
+ <h3>已选择的文件</h3>
|
|
|
+ <div class="file-item" v-for="(file, index) in selectedFiles" :key="index">
|
|
|
+ <div class="file-info">
|
|
|
+ <div class="file-icon">
|
|
|
+ <i :class="getFileIcon(file.type)"></i>
|
|
|
+ </div>
|
|
|
+ <div class="file-details">
|
|
|
+ <div class="file-name">{{ file.name }}</div>
|
|
|
+ <div class="file-size">{{ formatFileSize(file.size) }}</div>
|
|
|
+ <div class="file-status">
|
|
|
+ <span v-if="uploadedFiles[index]" class="status-success">
|
|
|
+ <i class="el-icon-check"></i> 已上传
|
|
|
+ </span>
|
|
|
+ <span v-else class="status-uploading">
|
|
|
+ <i class="el-icon-loading"></i> 上传中...
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="file-actions">
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="mini"
|
|
|
+ @click="removeFile(index)"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="submit-area">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="large"
|
|
|
+ @click="submitToMiniProgram"
|
|
|
+ :disabled="uploadedFiles.length === 0"
|
|
|
+ :loading="submitting"
|
|
|
+ >
|
|
|
+ {{ submitting ? '提交中...' : '提交给小程序' }} ({{ uploadedFiles.length }}个文件)
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'FileUpload',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ selectedFiles: [],
|
|
|
+ uploadedFiles: [], // 存储上传后的文件URL
|
|
|
+ submitting: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.checkWechatEnvironment()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 检查微信环境
|
|
|
+ checkWechatEnvironment() {
|
|
|
+ const isWechat = /micromessenger/i.test(navigator.userAgent)
|
|
|
+ if (!isWechat) {
|
|
|
+ this.$message.warning('请在微信中打开此页面')
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 触发文件选择
|
|
|
+ triggerFileInput() {
|
|
|
+ this.$refs.fileInput.click()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理文件选择
|
|
|
+ async handleFileSelect(event) {
|
|
|
+ const files = Array.from(event.target.files)
|
|
|
+
|
|
|
+ for (const file of files) {
|
|
|
+ // 检查文件大小限制 (50MB)
|
|
|
+ if (file.size > 50 * 1024 * 1024) {
|
|
|
+ this.$message.error(`文件 ${file.name} 超过50MB限制`)
|
|
|
+ continue
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查是否已存在同名文件
|
|
|
+ const exists = this.selectedFiles.find(f => f.name === file.name)
|
|
|
+ if (exists) {
|
|
|
+ this.$message.warning(`文件 ${file.name} 已存在`)
|
|
|
+ continue
|
|
|
+ }
|
|
|
+
|
|
|
+ // 添加到选中文件列表
|
|
|
+ this.selectedFiles.push(file)
|
|
|
+
|
|
|
+ // 上传文件并获取URL
|
|
|
+ try {
|
|
|
+ await this.uploadFile(file)
|
|
|
+ } catch (error) {
|
|
|
+ console.error(`上传文件 ${file.name} 失败:`, error)
|
|
|
+ this.$message.error(`上传文件 ${file.name} 失败`)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 清空input值，允许重复选择同一文件
|
|
|
+ event.target.value = ''
|
|
|
+ },
|
|
|
+
|
|
|
+ // 删除文件
|
|
|
+ removeFile(index) {
|
|
|
+ this.selectedFiles.splice(index, 1)
|
|
|
+ // 同时删除对应的上传文件信息
|
|
|
+ if (this.uploadedFiles[index]) {
|
|
|
+ this.uploadedFiles.splice(index, 1)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取文件图标
|
|
|
+ getFileIcon(type) {
|
|
|
+ if (type.startsWith('image/')) {
|
|
|
+ return 'el-icon-picture'
|
|
|
+ } else if (type.includes('pdf')) {
|
|
|
+ return 'el-icon-document'
|
|
|
+ } else if (type.includes('word') || type.includes('document')) {
|
|
|
+ return 'el-icon-document'
|
|
|
+ } else if (type.includes('excel') || type.includes('spreadsheet')) {
|
|
|
+ return 'el-icon-document'
|
|
|
+ } else if (type.includes('video')) {
|
|
|
+ return 'el-icon-video-camera'
|
|
|
+ } else if (type.includes('audio')) {
|
|
|
+ return 'el-icon-headset'
|
|
|
+ } else {
|
|
|
+ return 'el-icon-document'
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 格式化文件大小
|
|
|
+ formatFileSize(bytes) {
|
|
|
+ if (bytes === 0) return '0 B'
|
|
|
+ const k = 1024
|
|
|
+ const sizes = ['B', 'KB', 'MB', 'GB']
|
|
|
+ const i = Math.floor(Math.log(bytes) / Math.log(k))
|
|
|
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
|
|
+ },
|
|
|
+
|
|
|
+ // 提交给小程序
|
|
|
+ async submitToMiniProgram() {
|
|
|
+ if (this.uploadedFiles.length === 0) {
|
|
|
+ this.$message.warning('请先选择并上传文件')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.submitting = true
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 检查微信环境
|
|
|
+ if (typeof WeixinJSBridge === 'undefined') {
|
|
|
+ this.$message.error('请在微信中打开此页面')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 通过微信JS-SDK发送消息给小程序
|
|
|
+ if (window.wx && window.wx.miniProgram) {
|
|
|
+ // 在微信小程序web-view中
|
|
|
+ window.wx.miniProgram.postMessage({
|
|
|
+ data: {
|
|
|
+ type: 'file_upload',
|
|
|
+ files: this.uploadedFiles
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ this.$message.success('文件已提交给小程序')
|
|
|
+ this.selectedFiles = []
|
|
|
+ this.uploadedFiles = []
|
|
|
+ } else {
|
|
|
+ // 如果不在小程序web-view中，提示用户
|
|
|
+ this.$message.error('请在微信小程序中打开此页面')
|
|
|
+ }
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ console.error('提交文件失败:', error)
|
|
|
+ this.$message.error('提交失败，请重试')
|
|
|
+ } finally {
|
|
|
+ this.submitting = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 准备文件数据
|
|
|
+ async prepareFilesData() {
|
|
|
+ const filesData = []
|
|
|
+
|
|
|
+ for (const file of this.selectedFiles) {
|
|
|
+ try {
|
|
|
+ const base64 = await this.fileToBase64(file)
|
|
|
+ filesData.push({
|
|
|
+ name: file.name,
|
|
|
+ type: file.type,
|
|
|
+ size: file.size,
|
|
|
+ data: base64
|
|
|
+ })
|
|
|
+ } catch (error) {
|
|
|
+ console.error('转换文件失败:', error)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return filesData
|
|
|
+ },
|
|
|
+ uploadFile(file) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('file', file);
|
|
|
+
|
|
|
+ this.$store.dispatch('pool/uploadFile', formData).then(res => {
|
|
|
+ const fileInfo = {
|
|
|
+ name: file.name,
|
|
|
+ type: file.type,
|
|
|
+ size: file.size,
|
|
|
+ url: res.data.imgUrl
|
|
|
+ };
|
|
|
+
|
|
|
+ // 添加到已上传文件列表
|
|
|
+ this.uploadedFiles.push(fileInfo);
|
|
|
+ console.log('文件上传成功:', fileInfo);
|
|
|
+ resolve(fileInfo);
|
|
|
+ }).catch((error) => {
|
|
|
+ console.error('文件上传失败:', error);
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: `上传文件 ${file.name} 失败，请重试！`
|
|
|
+ });
|
|
|
+ reject(error);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 文件转Base64
|
|
|
+ fileToBase64(file) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const reader = new FileReader()
|
|
|
+ reader.onload = () => resolve(reader.result)
|
|
|
+ reader.onerror = reject
|
|
|
+ reader.readAsDataURL(file)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.file-upload-container {
|
|
|
+ max-width: 800px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 20px;
|
|
|
+ background: #fff;
|
|
|
+ min-height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.header h2 {
|
|
|
+ color: #303133;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.header p {
|
|
|
+ color: #909399;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-area {
|
|
|
+ border: 2px dashed #d9d9d9;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 40px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+ background: #fafafa;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-area:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+ background: #f0f9ff;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-icon {
|
|
|
+ font-size: 48px;
|
|
|
+ color: #c0c4cc;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-text p {
|
|
|
+ margin: 5px 0;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-hint {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #c0c4cc;
|
|
|
+}
|
|
|
+
|
|
|
+.file-list {
|
|
|
+ margin-top: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.file-list h3 {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+
|
|
|
+.file-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 15px;
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ background: #fff;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.file-item:hover {
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.file-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.file-icon {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #409eff;
|
|
|
+ margin-right: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.file-details {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.file-name {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #303133;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+.file-size {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+
|
|
|
+.file-status {
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.status-success {
|
|
|
+ color: #67c23a;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.status-success i {
|
|
|
+ margin-right: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.status-uploading {
|
|
|
+ color: #e6a23c;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.status-uploading i {
|
|
|
+ margin-right: 3px;
|
|
|
+ animation: rotating 2s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes rotating {
|
|
|
+ from {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.file-actions {
|
|
|
+ margin-left: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.submit-area {
|
|
|
+ margin-top: 30px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+/* 响应式设计 */
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .file-upload-container {
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-area {
|
|
|
+ padding: 30px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .file-item {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ .file-actions {
|
|
|
+ margin-left: 0;
|
|
|
+ margin-top: 10px;
|
|
|
+ align-self: flex-end;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
rkljw