uniapp文件上传案例 vue3 - CSDN文库

### Vue3 UniApp 文件上传示例代码教程 #### 创建Vue3项目并集成UniApp环境为了在Vue3环境中使用UniApp进行文件上传，首先需要创建一个兼容Vue3的UniApp项目。这可以通过官方提供的CLI工具完成[^2]。 ```bash npm install -g @vue/cli vue create my-project cd my-project vue add uni-app ``` #### 配置`main.js` 确保项目的入口文件已经正确配置以支持Vue3和UniApp共存： ```javascript import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) // 注册uniapp插件 import uni from '@dcloudio/uni-app-plus' app.use(uni) app.mount('#app') ``` #### 构建文件上传组件接下来，在Vue3应用内构建用于处理文件上传逻辑的组件。此部分涉及HTML模板设计以及JavaScript中的事件处理器编写。 ##### HTML结构定义简单的表单来接收用户的文件输入，并提供按钮触发上传操作。 ```html <template> <view class="upload-container">  <text v-if="selectedFile">{{ selectedFile.name }}</text>  <input type="file" ref="fileInput" style="display:none;" @change="onFileChange"/>  <button @click="$refs.fileInput.click()">选择文件</button>  <button :disabled="!selectedFile" @click="upload">上传</button>  <progress v-if="uploading" :value="uploadProgress" max="100"></progress> </view> </template> ``` ##### JavaScript逻辑实现文件选取后的预览展示、准备上传数据包并向服务器发送请求的功能。 ```javascript <script setup> import { ref, reactive } from 'vue'; import axios from 'axios'; let selectedFile = ref(null); let uploading = ref(false); let uploadProgress = ref(0); function onFileChange(event){ const file = event.target.files[0]; if(file){ selectedFile.value = file; } } async function upload(){ try { uploading.value = true; let formData = new FormData(); formData.append('file', selectedFile.value); await axios.post('/api/upload', formData,{ headers: {'Content-Type': 'multipart/form-data'}, onUploadProgress(progressEvent) { uploadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total); }, }); alert('上传成功！'); } catch (error) { console.error(error.message || "发生错误"); } finally{ uploading.value = false; uploadProgress.value = 0; } } </script> ``` 上述代码片段展示了如何在一个Vue3驱动的应用里借助于UniApp的能力去实现在移动设备上友好的文件上传体验。注意这里假设存在一个名为`/api/upload`的服务端接口用来接受来自客户端提交的数据流[^1]。

阅读全文

相关推荐

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通