一、场景

       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。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐