uniapp开发微信小程序按钮保存图片

<image :show-menu-by-longpress='true' :src="qRCode.paymentCode" style="width: 276rpx;height: 276rpx;"></image>

// :show-menu-by-longpress=‘true’ 开启长按保存图片
handledownload(){
const that = this
uni.downloadFile({
url: that.qRCode.paymentCode, //图片的url地址
success: res => {
if (res.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function() {
uni.showToast({
title: ‘保存成功’,
duration: 2000
})

							},
							fail: function() {
								uni.showToast({
									title: '保存失败',
									duration: 2000
								})

							}
						})
					} else {
						uni.showToast({
							title: '保存失败',
							duration: 2000
						})
					}
				}
			})
		},
### 如何使用 UniApp 开发微信小程序实现视频上传与预览功能 #### 前端页面设计 为了实现在 UniApp开发微信小程序的视频上传和预览功能,前端页面的设计至关重要。可以创建两个主要界面:一个是用于选择本地视频文件并执行上传操作;另一个则是展示已上传视频供用户观看。 对于视频的选择与上传部分,在 `pages/index.vue` 文件内定义如下组件: ```vue <template> <view class="container"> <!-- 显示当前选中的视频缩略图 --> <video id="myVideo" :src="tempFilePath"></video> <!-- 视频选择按钮 --> <button type="primary" @click="chooseVideo">选择视频</button> <!-- 提交上传按钮 --> <button v-if="!uploading && tempFilePath !== ''" type="warn" @click="doUpload">上传视频</button> <!-- 正在上传提示 --> <text v-if="uploading">{{ progress }}%</text> </view> </template> <script> export default { data() { return { tempFilePath: '', // 存储临时路径 uploading: false, progress: 0 // 记录上传进度百分比 } }, methods: { chooseVideo() { uni.chooseVideo({ success(res) { this.tempFilePath = res.tempFilePath; }.bind(this), fail(err) { console.error('选择失败', err); } }); }, doUpload() { const that = this; wx.uploadFile({ url: 'http://your.server/api/upload', filePath: this.tempFilePath, name: 'file', formData: {}, header: {'content-type': 'multipart/form-data'}, success(uploadRes) { if (JSON.parse(uploadRes.data).success === true){ uni.showToast({title:'上传成功'}); }else{ uni.showModal({ content: JSON.stringify(JSON.parse(uploadRes.data)), showCancel:false}); } }, onProgressUpdate(progressEvent) { that.progress = Math.floor((progressEvent.totalBytesSent / progressEvent.totalBytesExpectedToSend)*100); } }); this.uploading = true; } } } </script> ``` 此代码片段实现了基本的视频选取以及通过 `wx.uploadFile()` 方法向指定 URL 发送 POST 请求完成上传过程[^1]。 #### 后端接口调用及服务器配置 后端服务需要提供接收来自客户端发送过来的数据流的能力,并将其存储至适当位置(如云储存)。这里假设采用 Node.js 和 Express 框架作为后台技术栈来处理 HTTP 请求。 安装必要的依赖包: ```bash npm install express multer cors body-parser ``` 编写简单的路由逻辑以支持文件上传: ```javascript const path = require('path'); const fs = require('fs'); const express = require('express'); const multer = require('multer'); // 创建Express应用实例 let app = express(); // 配置Multer中间件解析表单数据 var storage = multer.diskStorage({ destination(req, file, cb) {cb(null,'./uploads/')}, filename(req,file,callback){callback(null,new Date().toISOString()+path.extname(file.originalname))} }); let upload = multer({storage}).single('file'); app.use(express.json()); app.use(cors()); // 处理POST请求 - 图片上传API endpoint app.post('/api/upload',(req,res,next)=>{ try { upload(req, res,function(error){ if (!error){ let response={ message:"File uploaded successfully", fileName:req.file.filename }; res.status(200).send(response); } else { throw new Error(`Error during file upload ${error.message}`); } }) } catch(e){ next(new Error(e)); } }) // 错误处理器 app.use(function(err, req, res, next) { console.log(err.stack); res.status(500).json({ error: "Something went wrong!" }); }); // 设置静态资源目录以便可以直接访问上传后的文件 app.use("/uploads", express.static(path.join(__dirname,"uploads"))); // 监听端口启动HTTP server app.listen(process.env.PORT || 3000,()=>{ console.log("Server started"); }) ``` 这段脚本设置了一个 RESTful API `/api/upload` 来接受从前端传来的多媒体文件并将它们保存到磁盘上的特定文件夹中。同时启用了 CORS 支持跨源资源共享。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值