uniapp小程序端上传图片返回图片的临时地址怎么办?
一、场景uniapp小程序端做图片上传时,使用了vant weapp的upload组件,该组件上传图片之后返回的是一个图片的临时地址。官网上是这样描述的“文件上传完毕后会触发after-read回调函数,获取到对应的文件的临时地址,然后再使用wx.uploadFile将图片上传到远程服务器上”。获取到临时地址,后端如何处理?我们最常用的是上传后获取到一个file文件,然后将file文件传到后台,后
一、场景
uniapp小程序端做图片上传时,使用了vant weapp的upload组件,该组件上传图片之后返回的是一个图片的临时地址。官网上是这样描述的“文件上传完毕后会触发after-read
回调函数,获取到对应的文件的临时地址,然后再使用wx.uploadFile
将图片上传到远程服务器上”。获取到临时地址,后端如何处理?我们最常用的是上传后获取到一个file文件,然后将file文件传到后台,后台处理file文件即可。当前端传的是一个链接时怎么办?
二、解决方法
前端获取的是一个链接地址,这个地址传到后台,由于跨端了后台是识别不出来的。因此,我们还需要在前台处理一下这个地址。我们需要把临时地址转成base64(在这也试过将base64转为file,直接给后台传file。但uniapp小程序对new File不支持)。
//url转base64
urlTobase64(url) {
var toBase64Url;
uni.request({
url: url,
method: 'GET',
responseType: 'arraybuffer',
success: async res => {
let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
toBase64Url = 'data:image/jpeg;base64,' + base64;
//将base64数据传到后台方法中
getImgByKey(toBase64Url).then(res=>{
if(res.data.imgUrl){
uni.showToast({
title: '上传成功!',
icon: 'success',
});
}
})
}
});
},
获取到base64格式的数据后,然后将base64传给后台。
此时,后台需要做的就是接收base64字符串,然后解析转换为file。定义一个解析工具类;
package com.ruoyi.common.utils.file;
import org.springframework.web.multipart.MultipartFile;
import sun.misc.BASE64Decoder;
import java.io.*;
/**
* @Author: AppleSugar
* @Description:base64解析类
* @Date: Created in 19:14 2020/6/11
* @Modified By:
*/
public class BASE64DecodedMultipartFile implements MultipartFile{
private final byte[] imgContent;
private final String header;
public BASE64DecodedMultipartFile(byte[] imgContent, String header) {
this.imgContent = imgContent;
this.header = header.split(";")[0];
}
@Override
public String getName() {
return System.currentTimeMillis() + Math.random() + "." + header.split("/")[1];
}
@Override
public String getOriginalFilename() {
return System.currentTimeMillis() + (int) Math.random() * 10000 + "." + header.split("/")[1];
}
@Override
public String getContentType() {
return header.split(":")[1];
}
@Override
public boolean isEmpty() {
return imgContent == null || imgContent.length == 0;
}
@Override
public long getSize() {
return imgContent.length;
}
@Override
public byte[] getBytes() throws IOException {
return imgContent;
}
@Override
public InputStream getInputStream() throws IOException {
return new ByteArrayInputStream(imgContent);
}
@Override
public void transferTo(File dest) throws IOException, IllegalStateException {
new FileOutputStream(dest).write(imgContent);
}
public static MultipartFile base64ToMultipart(String base64) {
try {
String[] baseStrs = base64.split(",");
BASE64Decoder decoder = new BASE64Decoder();
byte[] b = new byte[0];
b = decoder.decodeBuffer(baseStrs[1]);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {
b[i] += 256;
}
}
return new BASE64DecodedMultipartFile(b, baseStrs[0]);
} catch (IOException e) {
e.printStackTrace();
return null;
}
}
}
创建好之后,在接收的方法中接收然后传值处理即可得到一个file类型的数据; 得到file之后就进行文件写入的操作即可。
MultipartFile file=BASE64DecodedMultipartFile.base64ToMultipart(avatarfile);
总体来讲,思路就是将Url地址转为base64格式,然后将base64转成file。
更多推荐
所有评论(0)