uniapp微信小程序下载接口返回的图片

由于第一次做,在参考了许多前辈们的方法后,最后找到了一个比较适合自己需求的方法,如下:

1、首先,点击下载按钮 触发下载事件

<view class="btn_div" @tap="clickNav" hover-class="btnHoverClass">
	<view>
		<image class="img" src="@/static/pro_img/down.png" mode="widthFix"></image>
		<view>下载图片</view>
	</view>
</view>

2、请求代码,responseType= “arraybuffer”, 是请求文件流,必须带入的属性,该属性在uniapp中不支持blob

uni.request({
	url: config.baseUrl + '/core/projectBase/exportImage', //服务请求地址
	data: params, //服务需要的参数
	header: {
		"content-type": "application/json",
		"Authorization": uni.getStorageSync('lifeData').vuex_token,
	},
	method: 'POST', //请求方式
	responseType: "arraybuffer", //此处是请求文件流,必须带入的属性
	success: function(res) {
		if (res.statusCode === 200) {
			var imgSrc = wx.arrayBufferToBase64(res.data); //二进制流转为base64编码
			var save = wx.getFileSystemManager();
			var number = Math.random();
			save.writeFile({
				filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
				data: imgSrc,
				encoding: 'base64',
				success: res => {
					wx.saveImageToPhotosAlbum({ //保存为png格式到相册
						filePath: wx.env.USER_DATA_PATH + '/pic' +
							number + '.png',
						success: function(res) {
							wx.showToast({
								title: '图片下载成功,请到相册查看',
								icon: 'none',
								duration: 2000, //提示的延迟时间,单位毫秒,默认:1500
							})

						},
						fail: function(err) {
							wx.showToast({
								title: '下载失败',
								icon: 'none',
								duration: 2000, //提示的延迟时间,单位毫秒,默认:1500
							})
						}
					})
				},
				fail: err => {
					console.log(err)
				}
			})
		}
	},
	fail: function(error) {
		console.log(error);
	}
});

以上是个人在开发中碰到的功能,以上内容仅供参考,如有问题欢迎纠正

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: Uniapp是一款基于Vue.js框架的跨平台开发工具,它支持同时开发多个平台的应用,其中包括微信小程序。在Uniapp中,我们可以使用uni.uploadFile()方法上传图片。 上传图片前,我们需要先获取到图片的本地路径,可以通过uni.chooseImage()方法选择图片并获取到本地路径: uni.chooseImage({ count: 1, success: function (res) { var tempFilePaths = res.tempFilePaths; } }); 接下来,我们就可以使用uni.uploadFile()方法上传图片了。具体参数说明如下: uni.uploadFile({ url: '上传接口的地址', filePath: '要上传的文件路径', name: '上传文件对应的 key', formData: {'其他额外的formdata'}, success: res => {}, fail: () => {}, complete: () => {} }); 其中,url为上传接口的地址;filePath为要上传的文件路径,即上一步获取到的本地路径;name为上传文件对应的key,可以根据后台的要求进行修改;formData为其他额外的formdata,可以根据后台的要求进行传递。success、fail和complete为上传成功、失败和完成后的回调函数。 上传图片需要注意的是,需要在微信小程序的后台配置好上传接口的请求域名并获取到上传的token等信息,否则上传会失败。 ### 回答2: 要实现uniapp微信小程序上传图片,我们需要了解一些相关的知识点和实现步骤。 首先,我们需要使用uniapp官方提供的wx.chooseImage()接口来获取用户选择的图片并且展示出来。代码如下: ``` uni.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: (res) => { this.tempFilePaths = res.tempFilePaths[0] this.imgSrc = this.tempFilePaths } }) ``` 其中count表示选择的图片数量,sizeType表示图片尺寸,sourceType表示图片来源,success表示成功回调函数,tempFilePaths是选择的图片本地文件路径。 然后,在获取到图片路径后,我们需要借助wx.uploadFile()接口来实现上传图片。具体实现代码如下: ``` uni.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: (res) => { this.tempFilePaths = res.tempFilePaths[0] this.imgSrc = this.tempFilePaths uni.uploadFile({ url: '上传图片接口地址', filePath: this.tempFilePaths, name: 'file', formData: { 'user': 'test' }, success: (res) => { console.log(res) } }) } }) ``` 其中url是上传图片接口地址,filePath是要上传的图片的本地文件路径,name表示上传图片对应的key值,formData表示要一起上传的数据,success表示成功回调函数。 需要注意的是,上传图片接口地址和具体的formData数据格式需要我们自己根据后台需求来进行处理。 以上就是实现uniapp微信小程序上传图片的原理和具体实现步骤,可以根据具体需求进行修改和调整。 ### 回答3: Uniapp是一款基于Vue.js框架开发的跨平台应用开发框架,用它我们可以快速简单地开发出多种类型的应用。其中,Uniapp集成了微信小程序的功能,可以通过Uniapp开发界面,同时发布到多个平台,如微信小程序、H5、iOS和安卓等。 在Uniapp中,小程序上传图片涉及到两个方面,一个是前端页面的实现,另一个是后端的接收和处理。下面我们分别来看一下。 一、前端页面的实现 1.首先,我们需要在页面中引入uni-com*ponents组件: ```html <uni-com*ponents @choose="chooseImage" :count="1">选择图片</uni-com*ponents> ``` 其中,chooseImage是我们自定义的方法名,被触发时执行选择图片的功能。 2.接着,在js代码文件中定义chooseImage方法: ``` chooseImage() { uni.chooseImage({ count: 1, success: chooseResult => { uni.uploadFile({ url: 'http://localhost:3000/upload', filePath: chooseResult.tempFilePaths[0], name: 'image', formData: { user: '' }, success(uploadResult) { console.log(uploadResult.data); } }); } }); } ``` 这里我们使用uni.chooseImage选择图片,然后调用uni.uploadFile上传图片,其中url是后端接口地址,filePath是临时文件路径,name是上传文件的key值,formData是一些额外的参数,success为上传成功的回调函数。 二、后端接收和处理 后端接收和处理图片涉及到Node.js和Express框架的使用,这里我们简单介绍一下。 1.首先,在服务器端使用npm安装multer和cors插件,分别用于文件上传和跨域处理。 ``` npm install multer cors ``` 2.在Node环境下创建upload.js文件,引入express、multer和cors插件,并定义上传路径和上传文件大小限制等相关参数,代码如下: ``` const express = require('express'); const path = require('path'); const multer = require('multer'); const cors = require('cors'); const app = express(); app.use(cors()); const storage = multer.diskStorage({ destination: './uploads/', filename: function(req, file, cb) { cb(null, Date.now() + '-' + file.originalname); } }); const upload = multer({ storage: storage, limits: { fileSize: 1024 * 1024 * 2 } // 上传文件大小限制,默认为2MB }); app.post('/upload', upload.single('image'), function(req, res) { const file = req.file; if (!file) { const error = new Error('Please upload a file'); error.httpStatusCode = 400; return next(error); } res.send(file); }); app.listen(3000, function() { console.log('Server started on port 3000'); }); ``` 这里我们使用express框架创建了一个服务器,并通过multer中间件实现上传文件的功能,同时使用cors插件解决跨域问题。我们在/upload接口中通过upload.single()实现单文件上传,同时通过res.send返回上传成功的文件信息。 3.最后,我们启动Node.js服务器,在小程序中选择并上传图片,我们可以在控制台中看到文件上传的结果。 总结: 通过以上代码,我们可以实现Uniapp微信小程序上传图片的功能,其中主要分为前端页面的实现和服务器端的处理。在实际使用中,我们可以根据实际需求进行不同的调整和优化,以便更好地满足应用需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值