小程序上传图片文件流转换

微信小程序上传图片以及后端返回文件流转换

我在做这个功能的时候也是找了很多教程，因为我很少接触到原生小程序，所以很多都需要先学，我这些也是观看了很多大佬的代码，综合到一起的，但是呢都存在着一定差异，现在把代码综合到一起，也方便大家以后查看，如果有和哪位大佬的代码相撞了，可能我就是观看了你的来进行综合的，因为看了很多，也不记得找的哪些篇文章了，希望各位大佬不要介意

 首先是上传

基本页面的格式

      上传{imgs}}"> -->+//样式.img-wrap {font-size: 30rpx;color: #33373E;margin-bottom: 10rpx;margin-left: 10px;
}.img-wrap .txt {margin-bottom: 20rpx;
}.img-wrap .imglist {display: flex;flex-wrap: wrap;
}.img-wrap .imglist .item {width: 150rpx;height: 150rpx;margin-right: 22rpx;margin-bottom: 10rpx;position: relative;
}
.img-wrap .imglist .last-item {width: 150rpx;height: 150rpx;text-align: center;line-height: 146rpx;border: 2rpx dashed #8B97A9;box-sizing: border-box;
}
.img-wrap .imglist .item image {width: 100%;height: 100%;
}
.img-wrap .imglist .item .delete {width: 30rpx;height: 30rpx;position: absolute;top: -14rpx;right: -12rpx;
}

接下来是上传的方法

再data里定义的参数并没有放出来，大家可以自行查看去定义

  bindUpload: function (e) {switch (this.data.imgs.length) {case 0:this.data.count = 8breakcase 1:this.data.count = 7breakcase 2:this.data.count = 6breakcase 3:this.data.count = 5breakcase 4:this.data.count = 4breakcase 5:this.data.count = 3breakcase 6:this.data.count = 2breakcase 7:this.data.count = 1break}var that = thiswx.chooseImage({count: that.data.count, // 默认3sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {console.log(res);var tempFilePaths = res.tempFilePathsfor (var i = 0; i < tempFilePaths.length; i++) {console.log(tempFilePaths);wx.uploadFile({url: `后端接口`,method: 'post',header: {"content-type": "multipart/form-data"},//tempFilePaths[i]打印出的是路径filePath: tempFilePaths[i],name: "file",success: function (res) {console.log(JSON.parse(res.data));if (res.statusCode == 200) {wx.showToast({title: "上传成功",icon: "none",duration: 1500})that.data.imgfileUrl.push(JSON.parse(res.data).data)//这个位置调用的方法是我的路径需要拼接截取that.getUrls(that.data.imgfileUrl)}},fail: function (err) {wx.showToast({title: "上传失败",icon: "none",duration: 2000})},complete: function (result) {console.log(result.errMsg)}})}}})},

接下来是路径的转换

getUrls:function (fileUrl) {console.log(fileUrl);let arr = []for(let i = 0; i < fileUrl.length; i++){console.log(fileUrl[i]);//这一块这么写的原因呢是因为我返回的图片路径是这个样子的（中间有筛选，大家可以根据自己的        //需求，图片返回的路径来查看该怎样去截取）,而我只想要后面部分// htps://wcc-file.s-cn-ngou.alyus.cm/anyFile/2022/01/11/f275ww68-                // 6d2a-4221-bc57-53fa250250e0.jpgif (fileUrl[i].fileUrl.indexOf("htps://wcc-file.s-cn-ngou.alyus.cm/anyFile/") != -1) {arr[i] = fileUrl[i].fileUrl.replace("htps://wcc-file.s-cn-ngou.alyus.cm/anyFile/","/");} else {arr[i] = fileUrl[i].fileUrl;}//在这里截取成功之后得到的是/2022/01/11/f275ww68-6d2a-4221-bc57-53fa250250e0.jpgconsole.log('arr[i]', arr[i]);
//调用下载接口将需要将这个作为url参数传递this.file(arr[i])}},

关于后端返回文件流最关键的一步

file: function (fileUrl) {console.log('fileUrl', fileUrl);const that = thiswx.request({url: '后端的下载接口',header: {//  "Authorization": 'Bearer ' + this.globaldata.token, //自定义请求头信息"content-type": "application/x-www-form-urlencoded",},method: 'POST',responseType: "arraybuffer",//将后端需要的url参数放在这里data: {url: fileUrl},success: (res) => {console.log(res);//在这里进行转换，这一步呢就是将后端返回的文件流，来转换成小程序能显示的图片格式const base64 = wx.arrayBufferToBase64(res.data);const base6422=`data:image/jpg;base64,${base64}`that.data.imgblobList.push(base6422)//拿到之后进行赋值that.setData({imgblobList:that.data.imgblobList})// // console.log("blobUrl", blobUrl);// console.log("this.data.imgblobList", this.data.imgblobList);},fail: (res) => {reject(res)}})},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！