van-uploader上传图片文件的方法（使用base64上传或使用文件路径）

van-uploader上传图片文件的方法（使用base64上传或使用文件路径）

<van-uploader
            :after-read="afterUploaderimg"
            :before-read="beforeUploaderimg"
            type="file"
            accept=".jpg,.png"
            mutiple="mutiple"
            capture="image/*"
            >
</van-uploader>

1. 使用base64上传

afterUploaderimg(file) {
      let base64111 = file.content;
      let image = new Image(); //新建一个img标签（还没嵌入DOM节点)
      image.src = base64111;
      let _this = this;
      image.onload = function () {
        let canvas = document.createElement("canvas"),
          context = canvas.getContext("2d"),
          data = "";
		///
        // 此段为压缩图片代码
        if (image.width >= 1000 || image.height >= 1000) {
          var imageWidth = image.width / 2; //压缩后图片的大小
          var imageHeight = image.height / 2;
        } else {
          var imageWidth = image.width;
          var imageHeight = image.height;
        }

        canvas.width = imageWidth;
        canvas.height = imageHeight;

        context.drawImage(image, 0, 0, imageWidth, imageHeight);
        
          
        data = canvas.toDataURL(file.file.type);

        // 获取base64码
        // replace 替换一个与正则表达式匹配的子串
        let base64 = data.replace(/data:image\/[A-Za-z]+;base64,/, "");
		// base64 作为上传的参数
        
      };
    },

2. 使用文件路径

beforeUploaderimg(file) {
      let form = new FormData();
      form.append(file,file)
		//  form 作为上传的参数
 },

扫码加q群