Vue将图片的网络地址转成Base64以及file

存储在sql的图片网络地址，我使用了逗号拼接连起来

Js：

selectGoodsByID(goodsID) {
    axios.post('/goods/selectGoodsByID', {
        goodsID: goodsID,
    }).then(function (data) {
        vm.goodsData = data.data;
        //用逗号分割成一个数组
        vm.tempArr = vm.goodsData.goodsImageList.split(",");
        //清空原本的数组
        vm.goodsData.goodsImageList = [];
        //使用递归的方法，防止图片不按顺序显示，因为image.onload()是异步执行的，图片全部一起加载
        vm.onloadImg(vm.tempArr, 0, vm.tempArr.length)
    })
},
    
onloadImg(tempArr, i, len) {
    var tempName = tempArr[i].split("/");
    tempName = tempName[tempName.length - 1];
    var fileName = tempName.substring(tempName.indexOf("_")+1);
    
    //一定要设置为let，不然图片不显示，下面解释↓
    let image = new Image();
    
    //解决跨域问题
    image.setAttribute('crossOrigin', 'anonymous');
    image.src = tempArr[i];
    
    //image.onload为异步加载
    image.onload = () => {
        var canvas = vm.$refs.headCanvas;
        var context = canvas.getContext('2d');
        canvas.width = image.width;
        canvas.height = image.height;
        context.drawImage(image, 0, 0, image.width, image.height);
        var dataurl = canvas.toDataURL("image/png");
        
        //这里的dataurl就是base64类型
        vm.goodsData.goodsImageList.push(dataurl);
        vm.imageListLength = vm.goodsData.goodsImageList.length
        
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        var file = new File([u8arr], fileName, {type: mime});
        file.lastModifiedDate = new Date();
        
        //这里的file就是file类型
        vm.submitImageList.push(file);
        i = i + 1;
        if (i < len) {
            vm.onloadImg(tempArr, i, len)
        }
    }
},

var 和 let 问题：

1、let 不能重复声明，但var可以

2、let会产生块级作用域，且只在自己的作用域内生效，但var不受限制

3、let不存在变量提升

4、let存在暂时性死域