图片上传和预览功能

本次分享的是在工作中遇到的图片上传和预览问题

因为使用的是weex框架进行开发（weex是一个比较老旧已经被废弃的框架），不支持一些比较好用的像el-ui这种目前比较流行，且功能比较丰富的ui库因此在解决时使用了原生的input（type = file）。

解决问题

weex自带的eeui库，并没有找到有关文件上传的模块。不得不使用原生js。虽然还是会有type警告，但是功能方面还是可以完成的。

 <input type="file" id="bankCard" @change="saveImg" />

html模块的写法没有发生改变，依旧是正常写法。借用change事件触发保存和上传图片的methods。

methods定义的saveImg方法

saveImg(event) {
      let files = event.target.files[0];
      if (files === undefined) {
        console.log("没有选择图片");
      }
      const _that = this;
      if (window.FileReader) {
        var reader = new FileReader();
        reader.readAsDataURL(files);
        //监听文件读取结束后事件
        reader.onloadend = function (e) {
          const result = e.target.result;
          const ele = e.target;
          _that.imgSrc[event.target.id] = result;
        };
      }
    },

需要注意的是在这个方法中使用了FileReader，这个方法是用来将图片转换成bs64格式的文件流。我这里是选择在reader.onloadend.事件结束之后将文件流保存到data组件的数据中。方便下面去做图片预览和其他一些想要的后续功能。附上data中的数据格式。

 data: () => ({
    imgSrc: {
      certificates: "",
      bankCard: "",
      otherCategories: "",
    },
    }

文件拿到了就可以开始上传了，我们在这边试了formData格式总是会报错，最终决定去使用原生的ajax去实现上传。

uploadImg(e) {
      var headers = {};
      var files = e.target.files[0];
      console.log("files", files);
      func.getUserToken((token) => {
        if (token.length > 0) {
          headers["token"] = token;
        }
        headers["netNo"] = "wechat";
      });
      // const  { action } = this;
      // this.uploading = true;
      // let parms = new FormData();
      // parms.append("file",files)
      let data = {
        file: files,
      };
      //  data = files

      console.log("shangchaun", data);
      const options = {
        headers: headers,
        action:
          "在这书写请求地址",
        data,
        onProgress: (e) => {
          this.uploadPercent = e.percent;
        },
        onSuccess: (res) => {
          console.log("success", res);
          console.log("此时有没有files", files);
          // this.handleUploadInfo(res.data)
        },
        onError: (err) => {},
      };
      ajax(options);
    },

Ajax（option）中可以将请求头，后端接口地址，还有一些后续参数带上。
上传成功后就可以使用刚才保存在data中的上传的图片bs64文件流去实现文件的预览了。

<img
                  class="hasbankCardImgSrc"
                  @click="openMask"
                  :class="imgSrc.bankCard ? 'bankCardImgSame':''"
                  :src="imgSrc.bankCard"
                />

把对应的img.Src下的对应属性绑定到对应的图片预览位置。当然可能在实现过程中会遇到一些其他的问题，比如我遇到了上面的元素会挡住下面的input点击不到，我的解决办法是使用css3的属性穿透语法。

CSS3 pointer-events允许鼠标点击穿透后面的元素
CSS新属性pointer-events：字面理解是点击鼠标事件，值分别是auto和none。
当使用pointer-events:none,表示它将捕获不到任何点击，而只是让事件穿透到它的下面。代码如下：

<style>
    .overlay {
        pointer-events: none;
    }
</style>
<div class="div1">
    <div id="overlay" class="overlay"></div>
</div> 
//浏览器支持：
可以看canIUse上的数据，目前支持IE11、Firefox3.6+、Chrome、Safari4+、Opera15+、Android、ios.·