首页写一个在uniapp中上传本地图片的代码

写一个在uniapp中上传本地图片的代码

时间: 2025-06-29 16:18:24 浏览: 5

在 UniApp 中，你可以使用 Vue 的 `FileReader` 和 `FormData` 对象来实现上传本地图片的功能。下面是一个简单的例子： ```html <template> <button @click="uploadImage">选择并上传图片</button> <div v-if="showPreview"> <img :src="previewUrl" alt="预览图"/> </div> </template> <script> export default { data() { return { file: null, previewUrl: '', showPreview: false, }; }, methods: { uploadImage(e) { e.preventDefault(); const input = document.getElementById('imageInput'); // 获取input元素 if (input.files && input.files[0]) { // 检查是否有文件 this.file = input.files[0]; // 设置选中的文件 this.showPreview = true; // 显示预览 const reader = new FileReader(); // 创建FileReader实例 reader.onload = function (e) { this.previewUrl = URL.createObjectURL(e.target.result); // 预览URL }.bind(this); reader.readAsDataURL(this.file); // 读取文件内容转为data URL } }, // 这里可以添加实际的上传逻辑，比如通过axios发送请求到服务器 // async uploadToServer(file) { // // ... 你的上传代码 // }, }, }; </script> <style scoped> /* 样式可以根据需求自定义 */ </style>  <input type="file" id="imageInput" accept="image/*" @change="uploadImage"/> ``` 在这个示例中，用户点击按钮后可以选择图片，然后图片会在预览区域显示。如果需要将图片上传到服务器，可以在 `uploadImage` 方法内部添加对应的网络请求代码。

阅读全文